docs/components/clipboard

Clipboardpreview

A button that copies a value and shows that it was copied.

import { Clipboard } from "@logic-ui/react/clipboard"

pnpm add @logic-ui/react

Anatomy#

Import the component and assemble its parts:

Anatomy

import { Clipboard } from "@logic-ui/react/clipboard";

<Clipboard.Root>
  <Clipboard.Trigger>
    <Clipboard.Indicator />
  </Clipboard.Trigger>
</Clipboard.Root>;

Examples#

Copied state#

Every part has a data-copied attribute while the value was copied less than timeout milliseconds ago (2 seconds by default). Style the parts with it, and listen to onCopiedChange to react in code.

Longer copied state

<Clipboard.Root
  value={url}
  timeout={4000}
  onCopiedChange={(copied) => console.log(copied)}
>
  <Clipboard.Trigger>Copy link</Clipboard.Trigger>
</Clipboard.Root>

Errors#

Browsers can refuse to write to the clipboard, for example on an insecure origin or without a user gesture. The copied state then stays off and onCopyError receives the error.

Report a refused copy

<Clipboard.Root value={token} onCopyError={() => toast.error("Copy failed")}>
  <Clipboard.Trigger>Copy token</Clipboard.Trigger>
</Clipboard.Root>

Indicator#

Clipboard.Indicator renders only while copied. Set keepMounted to keep it in the DOM and animate it with data-copied.

Fade the check in

<Clipboard.Root value={url}>
  <Clipboard.Trigger className="group relative size-8">
    <CopyIcon className="group-data-copied:invisible" />
    <Clipboard.Indicator
      keepMounted
      className="absolute inset-0 flex items-center justify-center text-green-600 opacity-0 transition-opacity duration-200 data-copied:opacity-100"
    >
      <CheckIcon />
    </Clipboard.Indicator>
  </Clipboard.Trigger>
</Clipboard.Root>

Styling#

Every part has data-copied while copied, so Tailwind's data-copied: variant styles it, and group-data-copied: styles what's inside a part.

API reference#

Clipboard.Root#

Groups the clipboard parts and holds the copied state. Renders a <div> element.

Props

value*: string
The text written to the clipboard.
timeout: numberdefault 2000
Time in milliseconds before copied goes back to false.
onCopiedChange: (copied: boolean) => void
Called when copied changes.
onCopyError: (error: unknown) => void
Called when the browser refuses to write to the clipboard.
className: string
CSS class applied to the element.
style: React.CSSProperties
Style applied to the element.
render: React.ReactElement | ((props, state) => React.ReactElement)
Replaces the element with another tag or component, or composes it with one. Takes an element, or a function that receives the props and the state.

Data attributes

data-copied: Present while the value was copied less than timeout ms ago.

Clipboard.Trigger#

A button that copies the value of Clipboard.Root. Renders a <button> element.

Props

className: string
CSS class applied to the element.
style: React.CSSProperties
Style applied to the element.
render: React.ReactElement | ((props, state) => React.ReactElement)
Replaces the element with another tag or component, or composes it with one. Takes an element, or a function that receives the props and the state.

Data attributes

data-copied: Present while the value was copied less than timeout ms ago.

Clipboard.Indicator#

Shows that the value was just copied, for example a check icon. Renders a <span> element, only while copied is true unless keepMounted is set.

Props

keepMounted: booleandefault false
Keep the element in the DOM when the value is not copied. Style it with data-copied.
className: string
CSS class applied to the element.
style: React.CSSProperties
Style applied to the element.
render: React.ReactElement | ((props, state) => React.ReactElement)
Replaces the element with another tag or component, or composes it with one. Takes an element, or a function that receives the props and the state.

Data attributes

data-copied: Present while the value was copied less than timeout ms ago.