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
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
import { CodeSnippet } from "@avala/design"; <CodeSnippet variant="single">CodeSnippet</CodeSnippet>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
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`.