Code

The code component displays code, commands, and technical language that requires distinct visual treatment. This includes programming languages, domain-specific languages such as search syntax, terminal commands, file paths, and configuration values. This component is designed for simple, single-line code. For multi-line or more complex use cases, use Code snippet instead.

Type Component

Tier Global

Documentation Status Minimal

Last Edited 02.03.2026

Open in Figma View on GitHub

Usage

The code component displays code, commands, and technical language that requires distinct visual treatment. This includes programming languages, domain-specific languages such as search syntax, terminal commands, file paths, and configuration values. Code uses a monospace font to distinguish it from human language, which uses the default text style.

The component appears most often within paragraph text but can also be used in lists, Tables, and other structured content.

Inline code

Use inline code for short, simple references within the normal text flow, such as commands, function names, or configuration keys. Keep inline code concise.

Code blocks

Use code block when single-line code benefits from separation from surrounding text. Code block scrolls horizontally by default if the line length exceeds the available width. For code that requires wrapping or multiple lines, use Code snippet instead.

When to use

• To display programming code, terminal commands, or domain-specific languages
• For technical values that should be interpreted literally
• To present executable snippets users may copy

When not to use

• For regular prose or human-readable text
• For emphasis or stress (use bold or italics instead)
• For multi-line code (use Code snippet instead)