Clipboard

A component to copy text to the clipboard

Anatomy

To set up the Clipboard correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Clipboard component in your project. Let’s take a look at the most basic example:

API Reference

Root

PropTypeDefault
asChild
boolean
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ root: string; input: string; label: string }>
onStatusChange
(details: CopyStatusDetails) => void
timeout
number
value
string

Control

PropTypeDefault
asChild
boolean

Indicator

PropTypeDefault
asChild
boolean
copied
type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal

Input

PropTypeDefault
asChild
boolean

Label

PropTypeDefault
asChild
boolean

Trigger

PropTypeDefault
asChild
boolean