Snippet
ProA compact, single-line code display for terminal commands, install instructions, and short code references. Includes an integrated copy button and a monospace font. Optimised for quick scanning and one-click copying of commands.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard snippet with command text and copy button. | Use for install commands, CLI instructions, and single-line code references. |
| With Tabs |
Usage Guidelines
Do
Include a copy button for one-click copying of the command.
Don't
Use snippets for multi-line code — use a Code Block instead.
Do
Use a shell prompt prefix ($) for terminal commands.
Don't
Omit the copy button — users expect to copy commands quickly.
Do
Keep snippets to a single line — use a Code Block for multi-line code.
Don't
Include the shell prompt in the copied text — only copy the command itself.
Code
Design Tokens
Accessibility
- Shell prompt prefix should be aria-hidden so screen readers do not announce "$".
- The copy button needs aria-label="Copy command to clipboard".
- Announce copy success via an aria-live region.