Codecomponent

Inline code span — renders a <code> element.

• Pass plain to drop the default background and padding.

An inline code span — renders a <code> element with monospace type and a subtle tinted background. Code.tsx exports four siblings that share the same monospace styling but carry different HTML semantics:

Things to know:

• Pick the sibling whose semantics match — they all look the same but mean different things to assistive tech and search.
• Pass plain to drop the default background and inline padding (useful when the code already sits inside a tinted container).
• Painted from the tint ladder: the background defaults to --tint-90 and the text to --tint-00, so it re-tints with its surrounding scope (override per-instance with --code-background / --code-color).
• Inside <Prose> raw <code> / <kbd> / <samp> / <var> pick up the same styling, and code inside a <pre> drops the inline box automatically.

Usage

Inline code and keyboard input

import { Code, Keyboard, Sample } from "shelving/ui";

<p>Run <Code>npm install</Code>, then press <Keyboard>Enter</Keyboard>.</p>
<p>It prints <Sample>Done.</Sample></p>

Plain (no background)

import { Code } from "shelving/ui";

<Code plain>const x = 1;</Code>

Styling

Code paints from the tint ladder: the box background / color default to ladder steps so they re-tint with the surrounding scope, and every property has a per-instance override hook.

Global tokens it reads: --font-code, --weight-code, --size-smaller, --leading, --space-xxsmall, --radius-xxsmall, and the tint-ladder steps --tint-00 / --tint-90 for the box fill and text.