How to build an accessible CodeSnippet in React

Code is rendered in semantic <code>/<pre>. The copy button is a real button with an aria-label that flips between the copy and copied messages so the action and its result are announced. Line numbers are aria-hidden so they are not read as content.

When to use a CodeSnippet

• Showing a command, token, or path the user is expected to copy
• Displaying a short read-only code block in docs or UI
• Inline code references inside flowing text (inline variant)

When not to use it

• An editable code input — use a textarea or code editor
• Whole source files needing folding, diagnostics, or many languages — use a dedicated viewer; the built-in highlighter is a presentational scan for bash/css/js/ts only

Keyboard interactions

Role group, verified at WCAG 2.2-AA.

• Enter
• Space

Common mistakes

Avoid: <CodeSnippet variant="inline" code={"line1\nline2"} />

Prefer: <CodeSnippet variant="multi" code={"line1\nline2"} />

The inline variant is a single in-text chip; multi-line content belongs in the multi variant

Example

<CodeSnippet code="npx cascivo add button" language="bash" />

See the full CodeSnippet reference →