Ark Logo
GitHub
Components
Clipboard

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:

import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
import { Clipboard } from '@ark-ui/react'

export const Basic = () => {
  return (
    <Clipboard.Root value="https://ark-ui.com">
      <Clipboard.Label>Copy this link</Clipboard.Label>
      <Clipboard.Control>
        <Clipboard.Input />
        <Clipboard.Trigger>
          <Clipboard.Indicator copied={<CheckIcon />}>
            <ClipboardCopyIcon />
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

API Reference

Root

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
ids
Partial<{ root: string; input: string; label: string }>

The ids of the elements in the clipboard. Useful for composition.

onStatusChange
(details: CopyStatusDetails) => void

The function to be called when the value is copied to the clipboard

timeout3000
number

The timeout for the copy operation

value
string

The value to be copied to the clipboard

Data AttributeValue
[data-scope]clipboard
[data-part]root
[data-copied]Present when copied state is true

Control

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]clipboard
[data-part]control
[data-copied]Present when copied state is true

Indicator

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
copied
type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal

Input

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]clipboard
[data-part]input
[data-copied]Present when copied state is true
[data-readonly]Present when read-only

Label

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]clipboard
[data-part]label
[data-copied]Present when copied state is true

RootProvider

PropDefaultType
value
UseClipboardReturn

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Trigger

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]clipboard
[data-part]trigger
[data-copied]Present when copied state is true