clipboard
The value is shown rather than hidden behind the button, because the thing a reader is about to paste is worth reading first. The field is an input rather than a paragraph, so the text can still be selected a word at a time.
<Clipboard value="pnpm add @75neo/react" />
<Clipboard label="Registry URL" value="https://75neo.dev/r/button.json" color="primary" /><Clipboard value="pnpm add @75neo/vue" />
<Clipboard label="Registry URL" value="https://75neo.dev/r/button.json" color="primary" />The install command at the top of this site’s setup guide is this component.
The copied state
Copying swaps the icon for a check and swaps it back after timeout, three seconds by
default. That is the whole confirmation: no color changes, so the component spends no
extra strength on a state that lasts three seconds.
copyIcon and copiedIcon replace either icon. In Vue the copyIcon and copiedIcon
slots take arbitrary markup and win over the props of the same name.
The value
value is required and one-way. Ark takes a controlled value, but nothing inside the
component writes one back, because the field is read-only. Passing a new value is the
only thing that changes what gets copied.
Ark spells it modelValue in Vue and value in React. The adapter maps the shared
prop onto whichever the framework wants, so value is the name in both.
Slots
The same word names the recipe slot, the data-slot attribute and the key in ui.
- base
- label
- control
- input
- trigger
- indicator
Variants
Read off the recipe, so these are the values that actually resolve. A Theme layer can change which one is the default; it cannot add a value.
- color
- primarysecondarysuccessinfowarningerrorneutral
- size
- smmdlg
Props
Taken by both adapters, read out of the component module. The same names and the same types work in React and Vue.
- ui
ClipboardUI
Per-slot class overrides.
- color
"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
Defaults to
"neutral"- size
"sm" | "md" | "lg"
Defaults to
"md"- valuerequired
string
The text to copy.
- label
string
Caption above the field. Clicking it focuses the field.
- timeout
number
How long the copied icon stays, in milliseconds.
Defaults to
3000- copyIcon
ReactNode
Replaces the copy icon.
- copiedIcon
ReactNode
Replaces the icon shown just after a copy.
React only
Also takes Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "defaultValue">, and Pick<React.ComponentProps<typeof Ark.Root>, "ids" | "onStatusChange">. A className among them reaches the base slot.