Clipboard

Copy a value to the clipboard and confirm the action with a transient copied state. The Clipboard namespace ships three parts that share one context: Clipboard.Root (holds the value and the copied flag), Clipboard.Trigger (the control that copies), and Clipboard.Indicator (swaps its content while the copied flag is set).

Clipboard.Root writes its value to navigator.clipboard on copy, flips copied to true, and resets it after 2 seconds. There is nothing to wire up — drop a trigger and an indicator inside the root.

Copy button

Give Clipboard.Trigger a render element to inherit a real control’s styling — here a Button. Each Clipboard.Indicator shows its children normally and its copied content while the value is on the clipboard, so you can swap both the icon and the label at once.

import { Button, Clipboard } from "@vesyl/ui-next";
import { CheckIcon, CopyIcon } from "lucide-react";

export default function ClipboardButton() {
  return (
    <Clipboard.Root value="sk_live_8fK2mQ7pX1vN4dR9tB6wL0zA">
      <Clipboard.Trigger render={<Button variant="outline" size="sm" />}>
        <Clipboard.Indicator copied={<CheckIcon className="text-green-600" />}>
          <CopyIcon />
        </Clipboard.Indicator>
        <Clipboard.Indicator copied="Copied">Copy API key</Clipboard.Indicator>
      </Clipboard.Trigger>
    </Clipboard.Root>
  );
}

Copy from a field

For a longer value the reader needs to see — a tracking number, an API key, a webhook URL — show it in a read-only InputGroup and place the trigger in an inline-end addon. This is the pattern used on the WMS label-purchased screen.

import {
  Clipboard,
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@vesyl/ui-next";
import { CheckIcon, CopyIcon } from "lucide-react";

const TRACKING_NUMBER = "1Z999AA10123456784";

export default function ClipboardInput() {
  return (
    <Clipboard.Root value={TRACKING_NUMBER}>
      <InputGroup className="w-full max-w-sm">
        <InputGroupInput
          readOnly
          value={TRACKING_NUMBER}
          aria-label="Tracking number"
          className="font-mono"
        />
        <InputGroupAddon align="inline-end">
          <Clipboard.Trigger
            render={<InputGroupButton aria-label="Copy tracking number" />}
          >
            <Clipboard.Indicator copied={<CheckIcon className="text-green-600" />}>
              <CopyIcon />
            </Clipboard.Indicator>
          </Clipboard.Trigger>
        </InputGroupAddon>
      </InputGroup>
    </Clipboard.Root>
  );
}

Inline icon trigger

Without a render element, Clipboard.Trigger renders a bare <button> — style it with className for an unobtrusive icon button beside a label. Useful for copying a value that is already shown elsewhere, like a customer’s contact details.

Contact information

import { Clipboard, HStack } from "@vesyl/ui-next";
import { CheckIcon, CopyIcon } from "lucide-react";

export default function ClipboardInline() {
  return (
    <Clipboard.Root value="Jordan Reyes · jordan@example.com · (415) 555-0182">
      <HStack className="text-sm">
        <span className="font-medium">Contact information</span>
        <Clipboard.Trigger className="text-muted-foreground hover:text-foreground transition-colors">
          <Clipboard.Indicator copied={<CheckIcon className="size-4 text-green-600" />}>
            <CopyIcon className="size-4" />
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </HStack>
    </Clipboard.Root>
  );
}

Reference

Clipboard.Root

Provides the clipboard context. On copy it writes value to navigator.clipboard, sets copied, and clears it after 2000ms.

Prop	Type	Default	Description
`value`	`string`	—	Text written to the clipboard on copy
`children`	`React.ReactNode`	—	Triggers and indicators for this value

Clipboard.Trigger

The control that fires the copy. With no render, it renders a <button type="button"> (cursor-pointer). With render, it clones that element and attaches the onClick copy handler and merged className.

Prop	Type	Default	Description
`render`	`React.ReactElement`	—	Element to render as the trigger; receives the copy `onClick`
`children`	`React.ReactNode`	—	Trigger content, typically a `Clipboard.Indicator`
`className`	`string`	—	Merged onto the rendered element

Clipboard.Indicator

Swaps content based on the copied flag — renders children normally, copied while the value is on the clipboard.

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Content shown in the idle state
`copied`	`React.ReactNode`	—	Content shown for 2s after a copy

useClipboard

Hook returning the current clipboard context — { value, copied, copy }. Must be called inside a Clipboard.Root; throws otherwise. Reach for it when you need the copied state or the copy() function outside the provided parts.