How to build an accessible Code in React
Renders a native <code> element so assistive tech can expose the content as code; relies on monospace and surface, not color alone, to distinguish it
When to use a Code
- 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 it
- Multi-line code blocks with syntax highlighting — use a <pre> block
- Keyboard shortcuts the user should press — use Kbd
Accessibility
Role code, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <Code>Press Cmd+K</Code>
Prefer: <Kbd>⌘</Kbd> <Kbd>K</Kbd>
Code marks literal code; key presses are semantically Kbd
Example
<Code>npx cascivo add button</Code>