CodeSnippet
Carbon-spec inline + block code display with a copy button. Three variants: single — inline single-line code with copy multi — block multi-line code with copy + expand/collapse for >15 lines terminal — block with $-prompt prefix; uses dark-tone styling regardless of theme tone
primitives-codesnippet--defaultOpen all variants →
When to use
- Display CLI commands, config snippets, API calls, JSON examples in docs and product UIs.
- Variants:
- single — single-line inline code (e.g. <CodeSnippet variant="single">npm install foo</CodeSnippet>). - multi — multi-line code with copy + expand/collapse for long content (default 15 lines). - terminal — multi with shell-prompt aesthetic; dark surface in both light + dark themes.
When not to use
- Editable code → use a dedicated editor; CodeSnippet is read-only.
- Inline code without a copy button → use plain
<code>. - Generic monospace text labels → use `Slug`.