CopyButton

Copies a command, key or link to the clipboard and confirms it. Use it next to text people are likely to paste elsewhere.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

npm run build

Icon only

When the clipboard refuses

npm run build

Icon only

When the clipboard refuses

npm run build

Icon only

When the clipboard refuses

tsx

import { CopyButton } from '@skribly/ui/actions'

tsx

<CopyButton
  text="npm run build"
  label="Copy"
  copiedLabel="Copied"
  failedLabel="Copy failed. Select the text and press Ctrl+C."
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

Success and failure each have an icon and a word and are announced through a polite live region.
The confirmation stays while the button is hovered or focused and goes back afterwards; a failure stays on screen, with what to do instead, until the next press.
The icon-only form keeps a stable name.

This demo runs through axe in all three themes on every test run. See what the tests check.