import { Clipboard, IconButton } from "@chakra-ui/react"
const Demo = () => {
return (
<Clipboard.Root value="https://chakra-ui.com">
<Clipboard.Trigger asChild>
<IconButton variant="surface" size="xs">
<Clipboard.Indicator />
</IconButton>
</Clipboard.Trigger>
</Clipboard.Root>
)
}
Usage
import { Clipboard } from "@chakra-ui/react"<Clipboard.Root>
<Clipboard.Trigger>
<Clipboard.CopyText />
<Clipboard.Indicator />
</Clipboard.Trigger>
<Clipboard.Input />
</Clipboard.Root>Examples
Button
Use the Clipboard.Trigger component to create a copy button.
import { Button, Clipboard } from "@chakra-ui/react"
const Demo = () => {
return (
<Clipboard.Root value="https://chakra-ui.com">
<Clipboard.Trigger asChild>
<Button variant="surface" size="sm">
<Clipboard.Indicator />
<Clipboard.CopyText />
</Button>
</Clipboard.Trigger>
</Clipboard.Root>
)
}
Input
Use the Clipboard.Input component to create a copy input.
import { Clipboard, IconButton, Input, InputGroup } from "@chakra-ui/react"
const Demo = () => {
return (
<Clipboard.Root maxW="300px" value="https://chakra-ui.com">
<Clipboard.Label textStyle="label">Document Link</Clipboard.Label>
<InputGroup endElement={<ClipboardIconButton />}>
<Clipboard.Input asChild>
<Input />
</Clipboard.Input>
</InputGroup>
</Clipboard.Root>
)
}
const ClipboardIconButton = () => {
return (
<Clipboard.Trigger asChild>
<IconButton variant="surface" size="xs" me="-2">
<Clipboard.Indicator />
</IconButton>
</Clipboard.Trigger>
)
}
Timeout
Use the timeout prop to change the duration of the copy message.
import { Button, Clipboard } from "@chakra-ui/react"
const Demo = () => {
return (
<Clipboard.Root value="https://chakra-ui.com" timeout={1000}>
<Clipboard.Trigger asChild>
<Button variant="surface" size="sm">
<Clipboard.Indicator />
<Clipboard.CopyText />
</Button>
</Clipboard.Trigger>
</Clipboard.Root>
)
}
Link Appearance
Here's an example that combines the Clipboard.Trigger and
Clipboard.ValueText components to create a link appearance.
https://chakra-ui.com
import { Clipboard, Link } from "@chakra-ui/react"
const Demo = () => {
return (
<Clipboard.Root value="https://chakra-ui.com">
<Clipboard.Trigger asChild>
<Link as="span" color="blue.fg" textStyle="sm">
<Clipboard.Indicator />
<Clipboard.ValueText />
</Link>
</Clipboard.Trigger>
</Clipboard.Root>
)
}
Store
Alternatively, you can use the useClipboard hook to create a custom component.
"use client"
import { Button, useClipboard } from "@chakra-ui/react"
const Demo = () => {
const clipboard = useClipboard({ value: "https://chakra-ui.com" })
return (
<Button variant="surface" size="sm" onClick={clipboard.copy}>
{clipboard.copied ? "Copied" : "Copy"}
</Button>
)
}
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 |