Copy Button

<CopyButton value="dpl_8f21c3d9" /><CopyButton value="dpl_8f21c3d9" variant="outline">Copy ID</CopyButton>

CopyButton is a Button that writes a string to the clipboard and then says so: the icon becomes a tick and stays that way long enough to be believed. Without the hold, a copy button is indistinguishable from a button that did nothing.

It takes every Button prop except icon and onClick — those two are what the component is. A labelled button also swaps its own text for "Copied" while the tick is up, and it falls back to the old execCommand trick when the Clipboard API is unavailable, so it still works over plain HTTP.

Usage

import { CopyButton } from "@heyo-sh/heyo-ui";<CopyButton value={deployment.id} variant="ghost" shape="square" />;

Icon only or labelled

Omit children for an icon-only button — it is square automatically and announces itself as "Copy" to a screen reader. Pass a label when the button sits on its own and the icon has no context to borrow from.

<CopyButton value="npx heyo-ui@latest" variant="ghost" /><CopyButton value="npx heyo-ui@latest" size="sm">Copy</CopyButton><CopyButton value="npx heyo-ui@latest" variant="primary">Copy command</CopyButton>

In a row

The usual home for a copy button is the end of a row holding an identifier — quiet enough to ignore, close enough to hit.

<div className="flex items-center justify-between gap-3 rounded-lg bg-heyo-base px-3 py-2 ring-1 ring-heyo-line"><code className="text-sm text-heyo-subtle">dpl_8f21c3d9</code><CopyButton value="dpl_8f21c3d9" variant="ghost" size="sm" /></div>

Properties