Skip to main content
Urbicon UI
source

CopyButtonbeta

One-tap copy-to-clipboard button with built-in success feedback: the icon swaps to a check and the intent flips to success for a moment. Icon-only by default; pass label for a labelled variant. Forwards variant/intent/size/tier to the underlying Button.

Playground

Variant
Size
Loading syntax highlighting...

01 Examples

Icon-only (default)

With no label the button is icon-only — drop it beside a value the user needs to grab. On success the icon swaps to a check and the intent flips to success for a moment.
npm i @urbicon-ui/blocks
Loading syntax highlighting...

With a label

Pass label for a labelled button. The visible text becomes the accessible name, and it swaps to copiedLabel (default “Copied”) on success.
Loading syntax highlighting...

Variants

CopyButton forwards variant to the underlying Button, so it speaks the full button styling vocabulary — ghost (default), outlined, filled and text.
Loading syntax highlighting...

02 In context

Copy an install command

The most common home for CopyButton: paired with a command or key inside a Card, so the value and its copy affordance read as one unit.
npm i @urbicon-ui/blocks
Loading syntax highlighting...

onCopy callback

onCopy fires with the copied value after a successful write — use it to log analytics, show a toast, or drive local state. onError fires on the failure path instead.
Copied 0 time(s)
Loading syntax highlighting...

03 Accessibility

  • In icon-only mode the button keeps a stable accessible name (Copy, or your own aria-label); the outcome is not baked into the name.
  • In labelled mode the visible text is the accessible name (WCAG 2.5.3, Label in Name); no aria-label overrides it.
  • A visually-hidden role="status" live region announces the result — Copied or Copy failed — the moment it happens, in both modes and without stealing focus. (An aria-label change alone is not reliably announced, so the icon-only default would otherwise be silent to a screen reader.)
  • The copy/check icon is aria-hidden; sighted users read state from the icon, the intent colour, and (in labelled mode) the swapped label.
  • The clipboard write can fail in an insecure (non-HTTPS) context or when permission is denied. That path calls onError and shows the failed state rather than throwing through the render.

04 API Reference

15 props
15 props 1 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt