Clipboard

Copies text to the clipboard

Usage

Use the Clipboard to let users copy text (e.g., a code snippet or token) to their clipboard.

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

<Clipboard value="Hello, World!">
  <Clipboard.Trigger>
    <Clipboard.Indicator />
  </Clipboard.Trigger>
  <Clipboard.Input />
</Clipboard>

Input

Use ClipboardInput to render an input field that contains the text to be copied.

Timeout

Control how long the copied state remains active before resetting by configuring a timeout.

API Reference

Clipboard

Manages the clipboard state and value.

Prop	Type	Default
value	`string`	-
timeout	`number`	`2000`

ClipboardTrigger

Renders a trigger button for copying text to the clipboard.

Prop	Type	Default
asChild	`boolean`	`false`

ClipboardInput

Renders an input field that contains the text to be copied.

Prop	Type	Default
asChild	`boolean`	`false`

ClipboardIndicator

Renders an indicator that shows the copied state.

Prop	Type	Default
asChild	`boolean`	`false`
copied	`boolean`	`false`

ClipboardValue

Renders the value of the clipboard.

Prop	Type	Default
asChild	`boolean`	`false`