Code visually marks technical text in a monospace font family, alternate colors, and responsive font size.
Structure
The Code component renders a native HTML <code> element by default. This element tells assistive technology that the enclosed text is a fragment of computer code or technical reference such as a variable name, HTML tag, or attribute key.
Semantic and visual distinction
The <code> element carries semantic meaning beyond its visual appearance. Code uses a distinct text and background color, border radius, and monospace font to visually separate technical text from body copy, but these visual cues are not available to all users. For monospace-styled text that does not represent code, use the Text component with a monospace font family instead, as it renders a <span> with no semantic meaning.