Code
Inline code span for identifiers, commands, and short snippets
Category: display · WCAG 2.2-AA · typography, code, inline, mono
Sizes
- sm
- md
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
Design tokens
--cascivo-font-mono--cascivo-color-text--cascivo-color-surface--cascivo-color-border--cascivo-radius-indicator--cascivo-text-xs--cascivo-text-sm
When to use
- Marking up an inline identifier, command, path, or token within prose
- Distinguishing literal code from surrounding text with a monospace span
When not to use
- Multi-line code blocks with syntax highlighting — use a <pre> block
- Keyboard shortcuts the user should press — use Kbd
How to build an accessible Code in React →
Examples
Default
<Code>npx cascivo add button</Code>In a sentence
Sits inline with surrounding text
<Text>Run <Code>vp check</Code> before committing.</Text>Small
<Code size="sm">--cascivo-color-accent</Code>