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' | 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. | |
defaultValue | string The initial value to be copied to the clipboard when rendered. Use when you don't need to control the value of the clipboard. | |
id | string The 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) => void The function to be called when the value is copied to the clipboard | |
onValueChange | (details: ValueChangeDetails) => void The function to be called when the value changes | |
value | string The 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