Clipboard

<Clipboard aria-label="Copy demo value" value="https://revaos.com" />

Usage

Import named components from @reva/ui. Primitives match Ark UI — Clipboard; Clipboard is the self-contained icon-only control ( IconButton styling, Copy → Check) whose copy path falls back to execCommand if the async Clipboard API is denied.

import { Clipboard } from "@reva/ui";

<Clipboard aria-label="Copy value" value="text-to-copy" />;

Composition

Clipboard

ClipboardRoot
├── ClipboardLabel
├── ClipboardControl
│   └── ClipboardInput
├── ClipboardValueText
├── ClipboardContext
├── ClipboardTrigger
│   └── ClipboardIndicator

ClipboardRoot wraps the feature. ClipboardTrigger and ClipboardIndicator cover the usual “activate / show copied” pattern. ClipboardContext supplies render-prop access to copy status. Use Clipboard when you only need the icon button.

Examples

Copy icon button

Use for inline copy actions (e.g. next to a secret or URL). Pass value and a required aria-label.

<Clipboard  aria-label="Copy provisioning URL"  value="otpauth://totp/Example:demo@example.com?secret=DEMO"/>

Size and variant

Accepts the same size and variant props as IconButton.

<Clipboard aria-label="Copy xs" size="xs" value="demo-xs" /><Clipboard aria-label="Copy sm" size="sm" value="demo-sm" /><Clipboard aria-label="Copy default" value="demo-default" /><Clipboard  aria-label="Copy outline"  variant="outline"  value="demo-outline"/>

Shorter copied state

Optional timeout (ms) resets the copied state — default 3000.

<Clipboard  aria-label="Copy with short feedback"  timeout={1000}  value="fast-reset"/>

Primitive composition

<ClipboardRoot value="composed-value">  <ClipboardTrigger asChild>    <button      className="text-sm font-medium text-primary-solid underline-offset-4 hover:underline"      type="button"    >      <ClipboardIndicator copied="Copied!">Copy link</ClipboardIndicator>    </button>  </ClipboardTrigger></ClipboardRoot>

Accessibility

Icon-only Clipboard requires a descriptive aria-label. After a successful copy, the control shows a check icon; keep the label describing the action (e.g. “Copy setup secret”), not the success state.

Props

Clipboard

Clipboard primitives

Also exported: ClipboardContext, ClipboardControl, ClipboardInput, ClipboardLabel, ClipboardRootProvider, ClipboardValueText, useClipboard, useClipboardContext. See Ark UI — Clipboard for props such as value, defaultValue, and onStatusChange.