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.
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. | |
defaultValue | stringThe initial value to be copied to the clipboard when rendered. Use when you don't need to control the value of the clipboard. | |
id | stringThe unique identifier of the machine. | |
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 | |
onValueChange | (details: ValueChangeDetails) => voidThe function to be called when the value changes | |
value | stringThe controlled value of the clipboard |
Explorer
Explore the Clipboard component parts interactively. Click on parts in the
sidebar to highlight them in the preview.
Component Anatomy
Hover to highlight, click to select parts
root
control
trigger
indicator
input
label
valueText
clipboard.recipe.ts