Clipboard - Chakra Ui

Usage

tsx

import { Clipboard } from "@chakra-ui/react"

tsx

<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.

Input

Use the Clipboard.Input component to create a copy input.

Timeout

Use the timeout prop to change the duration of the copy message.

Link Appearance

Here's an example that combines the Clipboard.Trigger and Clipboard.ValueText components to create a link appearance.

Store

Alternatively, you can use the useClipboard hook to create a custom component.

Props

Root

Explorer

Explore the Clipboard component parts interactively. Click on parts in the sidebar to highlight them in the preview.