Raft 设计系统
English

组件 · 数据展示

CopyableCode

One command people copy and run, on a code surface with a copy button that confirms with a check.

稳定也叫 Command line
import { CopyableCode } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

One line that people copy and run elsewhere: the command that connects a computer, installs the CLI or signs in. The command sits on a code surface with a copy button beside it; after a copy, the button shows a check for a moment.

copyable-code/compositions/compact-detail-command

When to use

SituationUse
One command people copy and runCopyableCode
A name from code inside a sentenceInlineCode
Several lines of code, or a logCodeBlock

Anatomy

  • CopyableCodeRoot: holds the command and the button, and handles the copy. Required.
  • CopyableCode: the command. Its text is what gets copied. Required.
  • CopyableCodeAction: the copy button, an icon Button. Required.

Variants

VariantUse for
size="md"The main step of a dialog or a page, such as setting up a computer
size="sm"A command among other details, such as in a panel or a list

States

StateLook
CopiedThe copy icon turns into a check, then back after a moment
Copy failedNothing changes in the component; onError runs so you can tell the person
copyable-code/compositions/copy-failure
copyable-code/compositions/copy-error-toast

Behavior

  • The button copies the text content of CopyableCode. onCopy runs only after the copy succeeded.
  • Without truncate, a long command wraps; with it, the command stays on one line and scrolls sideways.

Content

  • Show the command exactly as people run it.
  • When a copy fails, say so and say what to do: "Couldn't copy the command. Copy the text manually, or check the browser's clipboard permission."

Accessibility

  • CopyableCodeAction is labeled "Copy code" and "Copied code" by default, and announces the change (aria-live="polite"). Give it an aria-label that names what is copied: "Copy login command".
  • Tell the person about a failed copy in words, through onError (a Toast or a status line). The icon alone doesn't say it failed.
  • The command is a code element, so screen readers read it as text.

Rules

  • Set the command in Space Mono, text-mono-code, on layer-code with a line-hairline border.
  • Keep a command on one line: use truncate, don't let it wrap.
  • Don't copy the $ prompt. Keep the prompt out of CopyableCode, because everything in it is copied.

API

CopyableCode

Prop类型默认值
truncateboolean

Also takes the attributes of its element.

CopyableCodeAction

Prop类型默认值
buttonClassNamestring
childrenReactNode | ((state: { copied: boolean; }) => ReactNode)
loadingboolean
loadingLabelstring
size`md` (32px) and `icon-md` for rows, cards, banners, toolbars and panel headers; `lg` and `icon-lg` (the control height) for dialog footers, forms and beside a field; `xl` for a full-width call to action. The size follows the place: see Button › Size by place."md" | "lg" | "xl" | "icon-md" | "icon-lg" | DeprecatedButtonSize"md"
variant"primary" | "accent" | "warning" | "danger" | "default" | "outline" | "information" | "muted" | "success" | "danger-secondary" | "danger-outline" | "ghost" | "on-frame"
focusableWhenDisabledWhether the button should be focusable when disabled.booleanfalse
nativeButtonWhether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).booleantrue
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

CopyableCodeRoot

Prop类型默认值
copiedboolean
onCopyCalled with the copied text only after a write that actually landed.(value: string) => void | Promise<void>
onErrorCalled when every copy strategy failed, so the consumer can tell the user.(error: Error) => void
size"sm" | "md""md"

Also takes the attributes of its element.

相关组件

改动

  • 0.4.0 · Breaking ChangesCopyableCodeAction label props removed. ariaLabel and copiedAriaLabel are gone; use the standard aria-label prop instead. The default label still swaps between "Copy code" and "Copied code". ([b3786da](https://github.com/botiverse/rui/commit/b3786da))
  • 0.1.0 · Breaking ChangesFlattened CopyableCode: the preset and CopyableCode.Code compound API are removed. Compose CopyableCodeRoot, CopyableCode, and CopyableCodeAction; CopyableCodeCodeProps is gone and data-slots were renamed.