Components / Typography

Code

Code is an inline <code> span — monospace type and a subtle background tint. Reach for it when a token name, a prop, or a short literal appears inside running text.

Loading playground…

What it is

A Text rendered as <code> with a monospace font, a small font size, and a muted background tint. Code is built for inline use — a span inside a paragraph. For multi-line code blocks, render Text as as="pre" or use a dedicated syntax-highlighting component; Code does not preserve whitespace or wrap.

Install

Code is exported from usemotif. No separate install.

example.tsx

import { Code } from 'usemotif';

API

Code

stable

function Code(props: CodeProps): JSX.Element

…TextPropsOmit<TextProps, "as">

Every Text prop except `as` — Code always renders `<code>`. Override `bg` / `color` for accent variants.

Examples

Inline code span:

example.tsx

<Paragraph>
Resolve a token with <Code>$colors.surface.base</Code>.
</Paragraph>

Accent-tinted variant:

example.tsx

<Code bg="$colors.status.errorSoft" color="$colors.status.error">
deprecated
</Code>