CopyableCode

A command or code row with a built-in copy action.

Preview#

Use CopyableCode for machine setup commands and other copy-first code rows. Use InlineCode for prose tokens and markdown code blocks for rich multi-line code.

npx @botiverse/raft-daemon@latest --server-url https://api.raft.build --api-key sk_machine_0000000000000000000000000000000000000000000000000000000000000000 # Zolplay

curl https://api.raft.build/v1/setup --machine workstation-2

raft login --token $RAFT_TOKEN

Simulate a denied clipboard, then press copy — the action fails and the toast reports it

A copy can fail — the browser may deny the write, or expose no clipboard API at all. The action only reports success for a write that actually landed: onCopy fires with the text on success, while onError receives an Error once every strategy failed. Handle it by telling the user and offering the manual fallback instead of leaving them with a silent no-op (the third composition above renders exactly that message).

Anatomy#

import { CopyableCode, CopyableCodeAction, CopyableCodeRoot } from "raft-ui";

<CopyableCodeRoot>
  <CopyableCode />
  <CopyableCodeAction />
</CopyableCodeRoot>

API#WIP

CopyableCodeRoot#

copied

boolean

Optional controlled copied state. Omit it to let the component manage feedback.

sizedefault: "md"

"sm" | "md"

Density for dialog setup rows versus tighter detail-panel rows.

onCopy

(value: string) => void | Promise<void>

Called with the copied text after a write that actually landed.

onError

(error: Error) => void

Called when every copy strategy failed, so the consumer can tell the user instead of claiming success.

...props

ComponentPropsWithRef<"div">

Owns copied state, size, and copy behavior for composed parts.

Prop	Type	Default	Description
`copied`	boolean	—	Optional controlled copied state. Omit it to let the component manage feedback.
`size`	"sm" \| "md"	"md"	Density for dialog setup rows versus tighter detail-panel rows.
`onCopy`	(value: string) => void \| Promise<void>	—	Called with the copied text after a write that actually landed.
`onError`	(error: Error) => void	—	Called when every copy strategy failed, so the consumer can tell the user instead of claiming success.
`...props`	ComponentPropsWithRef<"div">	—	Owns copied state, size, and copy behavior for composed parts.

CopyableCode#

truncatedefault: false

boolean

Single-line horizontally scrollable treatment for the code text.

...props

ComponentPropsWithRef<"code">

Code text slot. Its rendered text is the default value copied by Action.

Prop	Type	Default	Description
`truncate`	boolean	false	Single-line horizontally scrollable treatment for the code text.
`...props`	ComponentPropsWithRef<"code">	—	Code text slot. Its rendered text is the default value copied by Action.

CopyableCodeAction#

aria-labeldefault: "Copy code"

string

Accessible name for the icon-only action. When omitted, the label swaps to "Copied code" while the copy state is active. It is not rendered as visible text.

childrendefault: Copy / Check icon

ReactNode | ({ copied }) => ReactNode

Optional visible content for the copy trigger.

...props

ButtonProps

Copy trigger slot with default Copy/Check feedback icon.

Prop	Type	Default	Description
`aria-label`	string	"Copy code"	Accessible name for the icon-only action. When omitted, the label swaps to "Copied code" while the copy state is active. It is not rendered as visible text.
`children`	ReactNode \| ({ copied }) => ReactNode	Copy / Check icon	Optional visible content for the copy trigger.
`...props`	ButtonProps	—	Copy trigger slot with default Copy/Check feedback icon.