A button that copies text to the clipboard and shows a brief “copied” confirmation. Copy a literal value, or read the text from another element via the from selector. Renders icon-only by default; set show-label to display the swapping Copy → Copied text.
Show code Copy < nana-copy-button value = "npm install @nana-tec/ui-components" ></ nana-copy-button >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/copy-button " ;
< nana-copy-button value = " npm install @nana-tec/ui-components " ></ nana-copy-button >
Show code Copy < nana-copy-button value = "Hello, world" show-label ></ nana-copy-button > < nana-copy-button value = "Outlined" show-label variant = "outlined" ></ nana-copy-button > < nana-copy-button value = "Ghost" show-label variant = "ghost" ></ nana-copy-button >
Show code Copy < nana-copy-button value = "sm" label = "Copy" size = "sm" variant = "outlined" ></ nana-copy-button > < nana-copy-button value = "md" label = "Copy" size = "md" variant = "outlined" ></ nana-copy-button > < nana-copy-button value = "lg" label = "Copy" size = "lg" variant = "outlined" ></ nana-copy-button >
Property Type Default Description valuestring''Literal text to copy (used when from is unset or resolves to nothing) fromstring | undefined—CSS selector for an element to read the copy text from (value or text) labelstring'Copy'Label shown before copying (and the accessible name when icon-only) copiedLabelstring'Copied'Label shown after a successful copy showLabelbooleanfalseShow the visible text label alongside the icon variant'default' | 'ghost' | 'outlined''default'Visual style size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Size disabledbooleanfalseDisable the button copyIconIconName'content_copy'Icon shown in the idle state copiedIconIconName'done_all'Icon shown in the copied state feedbackDurationnumber2000How long the copied state persists, in milliseconds
Event Type Description nana-copyCustomEventFired after a successful copy (detail.value) nana-errorCustomEventFired when the copy fails (detail.error)
Variable Default Description --nana-copy-button-radius— Corner radius --nana-copy-button-color— Icon / text colour
Part Description buttonThe underlying button iconThe copy / success icon
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Copy Button interactively Every state, prop, and edge case — with live controls — in Storybook.
