COPYBUTTON
Source: app/(en)/design-system/_components/CopyButton/CopyButton.client.tsx. Client component: it needs 'use client' for clipboard access and feedback state.
Props
| Prop | Type | Default | Required |
|---|---|---|---|
Proptext | Typestring | Defaultnone | Requiredyes |
Proptype | Type'button' | 'submit' | 'reset' | Default'button' | Requiredno |
ProponClick | TypeMouseEventHandler | Defaultnone | Requiredno |
All other button attributes pass through. A consumer onClick runs first and can call preventDefault() to skip the copy.
Example
Feedback states
| State | Label | Announcement |
|---|---|---|
| Stateidle | LabelCOPY | Announcementnone |
| Statesuccess | LabelCOPIED | AnnouncementCopied to clipboard. |
| Statefailure | LabelCOPY FAILED | AnnouncementCopy failed. Select and copy the text manually. |
| Stateunavailable | LabelCOPY UNAVAILABLE | AnnouncementClipboard unavailable. Select and copy the text manually. |
Success returns to idle after 1.5 seconds. Repeat clicks while a copy is pending are ignored.
Accessibility
The control keeps a 44px minimum width and height in every state. A visually hidden role="status" region announces each outcome politely.