Copy Button API
View componentThe full prop reference for the Copy Button component. Copies text to the clipboard with success feedback.
Import
import { CopyButton } from '@structyl/styled';Props
CopyButton
A button component that copies text to clipboard with visual feedback (icon change and reset timer)
| Prop | Type | Default |
|---|---|---|
| value# | stringThe text to copy to clipboard when button is clicked (required) | — |
| resetAfter# | numberDuration in milliseconds before the copied state resets back to idle | 2000 |
| onCopied# | (value: string) => voidCallback fired after successful clipboard copy | — |
| variant# | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'success' | 'warning' | 'contained' | 'outlined' | 'text'Button style variant | 'ghost' |
| color# | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success' | 'default' | 'inherit'Button color (used with semantic variants: contained, outlined, text) | — |
| size# | 'default' | 'sm' | 'lg' | 'xl' | 'icon' | 'icon-sm' | 'icon-lg' | 'icon-xl'Button size | 'icon' |
| asChild# | booleanIf true, renders children as the button element (Slot polymorphism) | false |
| loading# | booleanWhen true, shows spinner and disables the button | false |
| loadingText# | React.ReactNodeText shown next to spinner when loading; defaults to children | — |
| leftIcon# | React.ReactNodeIcon element rendered before button text | — |
| rightIcon# | React.ReactNodeIcon element rendered after button text | — |
| disabled# | booleanDisables the button and prevents interaction | — |
| className# | stringCSS class names to merge with component styles | — |
| children# | React.ReactNodeButton content; if not provided defaults to Copy/Check icons based on state | — |
| ref# | React.Ref<HTMLButtonElement>Forward ref to underlying button element | — |
Source code
If you didn't find what you need here, read the component implementation .