Import
import { Clipboard } from '@cerberus/react'Usage
The Clipboard component provides an accessible way to copy text to the user's clipboard with built-in visual feedback.
The Clipboard component is unstyled by default, allowing for full customization.
Button
Use the asChild prop on the Clipboard.Trigger to create a copy button.
Input
Use the asChild or style props prop on the Clipboard.Input to create a copy input.
Note
A Button is valid as a trigger replacement because the Clipboard trigger will pass the aria attributes to the button.
Store
Use the useClipboard hook to create a fully custom solution.
Primitives
You can utilize the primitive components or the css prop to customize the clipboard component.
| Component | Description |
|---|---|
ClipboardRoot | The root context provider for the clipboard family. |
ClipboardLabel | A label element for accessibility. |
ClipboardControl | The wrapper for input and trigger elements. |
ClipboardInput | The input element containing the text to copy. |
ClipboardTrigger | The button that triggers the copy action. |
ClipboardIndicator | Shows the current state (copy/copied) with icons. |
CopyText | Shows the current state (copy/copied) with text. |
Data Attributes
The Clipboard component exposes several data attributes for better accessibility and customization.
| Name | Value | Description |
|---|---|---|
data-scope | clipboard | The scope of the components. |
data-part | root | The root container part. |
data-part | label | The label part. |
data-part | control | The control part. |
data-part | input | The input part. |
data-part | trigger | The trigger part. |
data-part | indicator | The indicator part. |
data-copied | Present when copied state is true |
API
Root
| Prop | Type | Required | Description |
|---|---|---|---|
asChild | boolean | No | Use the provided child element as the default rendered element, combining their props and behavior. |
defaultValue | string | No | The initial value to be copied to the clipboard when rendered. Use when you don't need to control the value of the clipboard. |
id | string | No | The unique identifier of the machine. |
ids | Partial<{ root: string; input: string; label: string }> | No | The ids of the elements in the clipboard. Useful for composition. |
onStatusChange | (details: CopyStatusDetails) => void | No | The function to be called when the value is copied to the clipboard |
onValueChange | (details: ValueChangeDetails) => void | No | The function to be called when the value changes |
timeout | number | No | The timeout for the copy operation |
value | string | No | The controlled value of the clipboard |
The Clipboard.Root is an abstraction of the Root component.
Indicator
The indicator accepts the following props:
| Name | Default | Description |
|---|---|---|
size | 16 | The size of the indicator (in pixels). Can be 16, 20, 24, or 32. |
Parts
The Clipboard API is an Object containing the full family of components.
Note
It is best to only use the Clipboard parts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.
| Name | Description |
|---|---|
Root | The ClipboardRoot component which is the Provider for the family. |
Label | The ClipboardLabel component for accessibility. |
Control | The ClipboardControl component wrapper. |
Input | The ClipboardInput component displaying the text. |
Trigger | The ClipboardTrigger component button. |
Indicator | The CopyIndicator component with default copy/checkmark icons. |
CopyText | The CopyText component with default "Copy"/"Copied" text indicators. |
Context | The raw context for accessing clipboard state within the component hierarchy. |