CopyPasteBlock.docs.mdx

CopyPasteBlock

A block that displays a value with copy-to-clipboard functionality. Supports paste via click/focus.

When to Use

• API keys or tokens display
• One-time codes or passwords
• Values users need to copy or paste

Properties

• title string — Label for the block
• value string (default: '') — The value to display and copy
• placeholder ReactNode — Placeholder when value is empty
• size 'small' | 'medium' | 'large' (default: 'medium') — Block size
• onPaste (text: string) => void | Promise<void | string> — Callback when text is pasted into the block
• onCopy () => void — Callback when the value is copied from the block

Style Defaults

• fill — #surface-2
• radius — 1r
• cursor — pointer
• preset — t3 (switches to t2 when size="large")
• height — 5x (4x for small, 6x for large)

Base Properties

Supports Base properties.

Style Properties

These properties allow direct style application without using the styles prop:

• Position: gridArea, order, gridColumn, gridRow, placeSelf, alignSelf, justifySelf, zIndex, margin, inset, position

Examples

<CopyPasteBlock title="API Key" value={apiKey} />

<CopyPasteBlock title="Token" value={token} size="small" />