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
npx @chakra-ui/cli 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>
)
}
Without Snippet
If you don't want to use the snippet, you can use the Clipboard component from
the @chakra-ui/react package.
import { Clipboard, IconButton } from "@chakra-ui/react"
import { LuClipboard } from "react-icons/lu"
import { LuCheck } from "react-icons/lu"
const Demo = () => {
return (
<Clipboard.Root value="https://chakra-ui.com">
<Clipboard.Trigger asChild>
<IconButton>
<Clipboard.Indicator copied={<LuCheck />}>
<LuClipboard />
</Clipboard.Indicator>
</IconButton>
</Clipboard.Trigger>
</Clipboard.Root>
)
}
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 |