127k
New

Copy Chip

PreviousNext

A machine value the reader can take with them.

Base UIReact AriaRadix UI
import { CopyChip } from "@/components/ui/copy-chip"

export function CopyChipDemo() {

A host, a command, a URL — something the reader needs verbatim. The value is set in mono because it is a machine value, and the chip reports its own success: the glyph swaps to the accept mark and the ink steps to green for a moment. There is no toast and no tinted plate behind it.

Usage

import { CopyChip } from "@/components/ui/copy-chip"
<CopyChip value="npm.po5.in" />

Long values

Pass label when the value is too long to show in full. The full value is still what reaches the clipboard.

<CopyChip value="ssh [email protected]" label="ssh deploy@…" />

Without a clipboard

navigator.clipboard needs a secure context. Where it is unavailable the chip selects its own text instead, so the reader can copy by hand rather than being left with a dead button.

API Reference

PropTypeDefaultDescription
valuestring—The text put on the clipboard.
labelReactNodevalueWhat is shown.
holdFornumber1600How long the copied state holds, in ms.
copiedLabelstring"Copied"Announced while the copied state holds.
onCopied(value: string) => void—Called after a successful copy.