Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Clipboard

Used to copy text to the clipboard

SourceStorybookRecipeArk

Setup

If you don't already have the snippet, run the following command to add the clipboard snippet

chakra snippet add clipboard

The snippet includes a closed component composition for the Clipboard component.

Usage

import {
  ClipboardButton,
  ClipboardIconButton,
  ClipboardInput,
} from "@/components/ui/clipboard"
<ClipboardRoot value="...">
  <ClipboardButton />
  <ClipboardIconButton />
  <ClipboardInput />
</ClipboardRoot>

Examples

Copy Button

Use the Clipboard.Context and Clipboard.Trigger components to create a copy button.

Input

Use the Clipboard.Input component to create a copy input.

Timeout

Use the timeout prop to change the duration of the copy message.

Use the ClipboardText component to create a link appearance.

Props

Root

PropDefaultType
timeout '3000'
number

The timeout for the copy operation

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

value
string

The value to be copied to the clipboard

Previous

Checkbox

Next

Close Button