Copy Button
DisplayButton that copies text to the clipboard with animated visual feedback. Uses the Clipboard API with fallback.
Playground
Controls
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | Text to copy to the clipboard. |
label | string | "Copy" | Button label. |
successLabel | string | "Copied!" | Label after successful copy. |
variant | 'default' | 'ghost' | 'outline' | "outline" | Visual style. |
size | 'sm' | 'md' | 'lg' | "md" | Button size. |
timeout | number | 1800 | Duration to display success state (ms). |
Examples
Ghost
vue
<DsCopyButton
text="Hello world"
variant="ghost"
label="Copy snippet"
/>Small
vue
<DsCopyButton
text="Copy me"
size="sm"
/>Large
vue
<DsCopyButton
text="Large button text"
size="lg"
variant="default"
/>Skeleton
Use DsCopyButtonSkeleton as a loading placeholder while content is being fetched.
Default
vue
<DsCopyButtonSkeleton />Accessibility
- aria-label is dynamically updated (copied state vs. normal).
- Visual feedback (checkmark icon + green color) is paired with a label change.