Display
Code
A function name or a flag, inside a sentence.
Usage
When to reach for it
import { Code } from '@misoto22/design'Notes
A function name, a flag, a filename — inside a sentence.
Renders a <code>, which is the element that means this. A <span> in a mono face looks identical and tells a screen reader nothing, and "pass dash dash force" is not what the sentence said.
Sized in em rather than in pixels, so the chip tracks whatever type it sits beside — the same rule Kbd follows, and for the same reason: fixed at one value, the identical token came out three different sizes on one page depending on whether it landed in body copy, a caption or a table cell.
The block form is CodeBlock. This one is inline by construction: it draws no plate, keeps no whitespace, and a multi-line string handed to it collapses into one run.
Anatomy
| Element | Description |
|---|---|
| Chiprequired | A real <code> on the --radius-sm corner, filled with --stone. Sized at 0.85em rather than in pixels, so the same token is proportionate in body copy, in a caption and in a table cell. |
Best practices
Do
- Use it for anything the reader would type or the machine would read: a flag, a path, a function, an env var name. The mono face is the signal that the string is literal.
- Let it inherit its size. It is set in em on purpose — fixed at one pixel value, the identical token comes out three different sizes on one page depending on where it landed.
Don’t
- Do not hand it a multi-line string. It keeps no whitespace and draws no plate, so the snippet collapses into one run — that is CodeBlock’s job.
- Do not style a <span> to look like this instead. The element is the whole point: a mono span reads identically and tells a screen reader nothing, and "pass dash dash force" is not what the sentence said.
Examples
inline
A real <code> element, sized in em so the same token is proportionate in body copy and in a caption. The element is the point rather than the mono face: a styled span reads identically and tells a screen reader nothing, so "pass dash dash force" is what gets announced.
Pass --force to overwrite dist/, and read the merge helper in src/lib/cn.ts.
At the small step it tracks down with the sentence: --force.
a literal or a key
The two chips a reader cannot tell apart by eye, in one sentence each. Code is a literal the machine reads and a person types out; Kbd is a key they press. The choice is entirely about meaning, because the elements are announced differently — and a code chip shaped like a key invites a press nothing answers.
Press ⌘ K to open the palette, then type Markdown to reach the component.
The flag is --force; the key that cancels the run is Esc.
a list of flags
The same chip in a definition list, where the type around it is smaller. It is sized at 0.85em rather than in pixels, so it is proportionate in a term column, in body copy and in a table cell without anyone choosing a size — and it keeps no whitespace, so a multi-line string handed to it collapses into one run. That case is CodeBlock.
--force- Overwrites
dist/instead of failing on it. --filter- Runs in one workspace package.
--dry-run- Prints what would be published, and publishes nothing.
Accessibility
- Renders <code>, which is what tells assistive tech the run is literal rather than prose.