import { ClipboardIconButton, ClipboardRoot } from "@/components/ui/clipboard"
const Demo = () => {
return (
<ClipboardRoot value="https://chakra-ui.com">
<ClipboardIconButton />
</ClipboardRoot>
)
}
Setup
If you don't already have the snippet, run the following command to add the
clipboard snippet
chakra snippet add clipboardThe 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.
import { ClipboardButton, ClipboardRoot } from "@/components/ui/clipboard"
const Demo = () => {
return (
<ClipboardRoot value="https://chakra-ui.com">
<ClipboardButton />
</ClipboardRoot>
)
}
Input
Use the Clipboard.Input component to create a copy input.
import {
ClipboardIconButton,
ClipboardInput,
ClipboardLabel,
ClipboardRoot,
} from "@/components/ui/clipboard"
import { InputGroup } from "@/components/ui/input-group"
const Demo = () => {
return (
<ClipboardRoot maxW="300px" value="https://sharechakra-ui.com/dfr3def">
<ClipboardLabel>Document Link</ClipboardLabel>
<InputGroup width="full" endElement={<ClipboardIconButton me="-2" />}>
<ClipboardInput />
</InputGroup>
</ClipboardRoot>
)
}
Timeout
Use the timeout prop to change the duration of the copy message.
import { ClipboardButton, ClipboardRoot } from "@/components/ui/clipboard"
const Demo = () => {
return (
<ClipboardRoot value="https://chakra-ui.com" timeout={1000}>
<ClipboardButton />
</ClipboardRoot>
)
}
Link Appearance
Use the ClipboardText component to create a link appearance.
"use client"
import { ClipboardLink, ClipboardRoot } from "@/components/ui/clipboard"
const Demo = () => {
return (
<ClipboardRoot value="https://chakra-ui.com">
<ClipboardLink color="blue.fg" textStyle="sm" />
</ClipboardRoot>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
timeout | '3000' | numberThe timeout for the copy operation |
asChild | booleanUse 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) => voidThe function to be called when the value is copied to the clipboard | |
value | stringThe value to be copied to the clipboard |