Code

Usage

• Use Code to visually mark short, technical references apart from surrounding body text — attributes (email, customer_id), HTML or CSS syntax (<table>, opacity), template variables ({{snippets.name}}), and system identifiers such as API keys and segment IDs.
• Never use Code for non-technical items or for text that reads better as plain body copy.
• Use Code for inline references inside body text. Use CodeBlock instead for multi-line text, syntax highlighting, or snippets the user copies to the clipboard.

Appearance

• Size — Code renders at 90% of the surrounding text's font size, so it stays proportional inside a heading, a paragraph, or small text.

Content

• Use the exact technical text a user encounters in their codebase, API, or data model. Never reformat or shorten an identifier to match prose conventions — anonymous_id, not Anonymous ID.
• Place Code inside a sentence that explains what the reference means or does. Never use Code as a standalone label.
• Limit each Code to a single identifier or short syntax reference. Never wrap a whole clause or sentence — use CodeBlock for longer technical text.

Implementation Notes

• Code extends Text and inherits every Text prop (text, size, weight, color, family, fontStyle) plus Box layout and sprinkle props.
• text defaults to "product-code", the typography token that produces the 0.9em relative sizing. Setting text or size replaces that token and breaks the proportional scaling.
• The text prop is a predefined typography style token, not the string content — content always comes from children or the default block.
• Code is polymorphic via as and defaults to code. Leave it unset so the <code> semantics are preserved.
• The component's own styles supply the padding, border, corner radius, surface background, and code text color — no props control them.
• React: pass content as children — <Code>customer_id</Code>.
• Ember: pass content via the default block — <PlumaCode>customer_id</PlumaCode>.