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 >
Properties Property Attribute Type Default Description copiedIconcopied-iconIconName'done_all'Icon shown in the copied state copiedLabelcopied-labelstring'Copied'Label shown after a successful copy copyIconcopy-iconIconName'content_copy'Icon shown in the idle state disabled— booleanfalseDisable the button feedbackDurationfeedback-durationnumber2000How long the copied state persists, in milliseconds from— string | undefined—CSS selector for an element to read the copy text from (`value` or text) label— string'Copy'Label shown before copying (and the accessible name when icon-only) showLabelshow-labelbooleanfalseShow the visible text label alongside the icon size— Size'md'Size value— string''Literal text to copy (used when `from` is unset or resolves to nothing) variant— CopyButtonVariant'default'Visual style
Events Event Description nana-copyFired after a successful copy (`detail.value`) nana-errorFired when the copy fails (`detail.error`)
CSS parts Part Description ::part(button)The underlying button ::part(icon)The copy / success icon
CSS custom properties Property Description --nana-copy-button-radiusCorner radius --nana-copy-button-colorIcon / text colour
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.
