Clipboard
A one-click copy-to-clipboard trigger with a built-in "copied" confirmation state, for API keys, code snippets, and share links.
API
All inputs and configuration options for zyra-clipboard.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | '' | The text copied to the clipboard |
label | string | 'Copy' | Label shown before copying |
copiedLabel | string | 'Copied!' | Label shown briefly after a successful copy |
size | 'sm' | 'md' | 'lg' | 'md' | Physical size of the trigger |
variant | 'button' | 'icon' | 'button' | Icon-and-label button, or icon-only |
Tokens
CSS custom properties zyra-clipboard reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-color-btn-secondary-bg | var(--zyra-color-surface-inset) | Resting fill color. Shared with zyra-button's secondary variant — see its Tokens section. |
Text--zyra-color-btn-secondary-text | var(--zyra-color-foreground) | Resting text/icon color. |
Border--zyra-color-btn-secondary-border | var(--zyra-color-border-color) | Resting border color. |
Hover background--zyra-color-btn-secondary-hover-bg | var(--zyra-color-surface-raised) | Fill color on hover. |
Hover border--zyra-color-btn-secondary-hover-border | var(--zyra-color-border-hover) | Border color on hover. |
Copied text--zyra-color-success-foreground | var(--zyra-color-success) | Text/icon and border/background color (foreground/border-color/subtle) while showing the copied confirmation. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Icon-only variant sets aria-label to the current label so the action is announced
- The copied confirmation is visual + textual, not color-only