CopyLine

One line of mono text with a copy button.

Overview

A command or token a reader pastes elsewhere.

Command

Do
bun add @hackcove/ui
import { CopyLine } from "@hackcove/ui";

<CopyLine text="bun add @hackcove/ui" />
One command or token to paste: CopyLine is the box and the copy button together.
Don't
bun add @hackcove/ui
import { Cluster, Code, CopyButton } from "@hackcove/ui";

<Cluster>
  <Code>bun add @hackcove/ui</Code>
  <CopyButton text="bun add @hackcove/ui" />
</Cluster>
Inline code beside a loose CopyButton is two parts that drift apart; the text can differ from what is copied.

Block

Do
bash
bun install
bun run build
import { CodeBlock } from "@hackcove/ui";

<CodeBlock label="bash" language="bash" lines={["bun install", "bun run build"]} />
Several lines are a CodeBlock; it keeps the line breaks.
Don't
bun install bun run build
import { CopyLine } from "@hackcove/ui";

<CopyLine text={"bun install\nbun run build"} />
CopyLine is one line of text: a newline in it collapses into a space and the box runs on.

Usage

  • Give the whole line as text; the box shows it and the button copies it.
  • Several lines are a CodeBlock; CopyLine is one line.
  • A long token wraps inside the box.
  • disabled disables the button, for a line shown before the page is interactive.

Accessibility

  • The text is a <code> element, so a reader can select it by hand as well.
  • The button is a CopyButton: a native button labelled copy, then copied.

API

CopyLine

One line of mono text in a box, with a CopyButton: a command or a token to paste elsewhere. disabled disables the button, e.g. until hydration. Every other div prop goes on the root <div>, so data-testid lands there; the <code> holds only text.

disabled
Type
boolean
text required
Type
string