UI
← Home

Copy Button

A copy-to-clipboard control. It shows a value and a button that writes that value to the clipboard and announces a confirmation in a polite live region. The conformance suite instruments `navigator.clipboard.writeText` to assert the shown value is what gets copied — without depending on system-clipboard permissions.

  • Axe
  • Focus
  • Copy

Preview

ui-lab-9f3a2

Installation

npx shadcn@latest add https://ui.publictheta.com/r/copy-button.json

Conformance

Verified against the @publictheta/ui-spec copy-button specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.

  • Axe — No WCAG 2 A/AA axe-core violations
  • Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
  • Copy — Cmd/Ctrl+C puts what is selected on the clipboard in every flavour the widget promises — and a touch device, which has no command key, can do the same thing with a control

See the full conformance matrix across all components.