Snippet

The Snippet component gives operational values — record IDs, API keys, webhook URLs — a quiet mono field with one-click copying. The bundled CopyButton is also exported standalone for embedding copy affordances anywhere (table cells, description lists, inspectors).

Import

import { Snippet, CopyButton } from '@nim-ui/components';

Basic usage

Click the copy button — the icon flips to a check and screen readers hear "Copied".

ord_2f9c8a71-44d0-4b7e-9a3d-1c5e8b2f6a90

whsec_Xk92mPq47TzR8vLnW3jYbA5cD1eF6gH0

Code

<Snippet text="ord_2f9c8a71-44d0-4b7e-9a3d-1c5e8b2f6a90" />
<Snippet text="whsec_Xk92mPq47TzR8vLnW3jYbA5cD1eF6gH0" />

Display-only prefix

The prefix renders but is never copied — handy for shell prompts.

pnpm add @nim-ui/components

Code

<Snippet prefix="$" text="pnpm add @nim-ui/components" />

Sizes

sk_live_51H8… (small)

sk_live_51H8… (medium)

Code

<Snippet size="sm" text="sk_live_51H8…" />
<Snippet size="md" text="sk_live_51H8…" />

Standalone CopyButton

cus_9x82mQ

Code

<span className="font-mono text-xs">cus_9x82mQ</span>
<CopyButton value="cus_9x82mQ" aria-label="Copy customer id" />

Props

Name	Type	Default	Description
`text*`	`string`	`-`	Value shown and copied verbatim
`prefix`	`string`	`-`	Display-only lead-in (e.g. "$") — never copied
`size`	`'sm' \| 'md'`	`'md'`	Field padding density
`className`	`string`	`-`	Additional CSS classes to apply

CopyButton

Name	Type	Default	Description
`value*`	`string`	`-`	Text copied to the clipboard
`timeout`	`number`	`2000`	How long the copied state shows, in ms
`onCopied`	`() => void`	`-`	Called after a successful copy
`size`	`'sm' \| 'md'`	`'sm'`	Button size (6 / 7 units square)
`aria-label`	`string`	`'Copy to clipboard'`	Accessible name — override with the specific value name

Accessibility

The copied state is announced via a polite live region ("Copied"), not just the icon swap.
CopyButton has a default aria-label; override it with something specific ("Copy webhook URL") when several appear on one screen.
Snippet text is select-all — one click selects the whole value for manual copying too.
Falls back to document.execCommand('copy') in non-secure contexts where the Clipboard API is unavailable.

Best Practices

Do

Use Snippet for values operators copy into other systems: IDs, keys, URLs
Override aria-label per value when a screen has multiple copy buttons
Keep secrets masked elsewhere; Snippet shows its value in full

Don't

Use Snippet for multi-line code — it's a single-line field (use a code block)
Put interactive content inside text — it renders as plain text

DescriptionList - Key-value record details
RecordInspector - Full record side panel
Kbd - Keyboard shortcut display

Snippet

On this page