CopyButton

A value the page already shows that a reader will paste elsewhere.

import { CopyButton } from "@hackcove/ui";

<CopyButton text="hc_live_9f2c41" label="Copy token" copiedLabel="Token copied" />

import { Button } from "@hackcove/ui";

<Button
  variant="ghost"
  size="sm"
  onClick={() => {
    void navigator.clipboard.writeText("hc_live_9f2c41");
  }}
>
  Copy token
</Button>

• text is what is copied; the label swaps to copiedLabel once it is on the clipboard.
• Name what is copied in label and copiedLabel ("Copy token", "Token copied") when the page has more than one.
• A command or token in its own box is a CopyLine, which carries this button.
• Do not write the clipboard call by hand in a Button.

• A native <button> with type="button" and a focus ring from the component.
• The label text is the accessible name and changes to copiedLabel after the copy.
• A refused or missing clipboard leaves the label unchanged; nothing is announced.