Text · Heading Atom
Heading
level is document structure and size is appearance, and they are separate props on purpose: a
page often needs an h2 that looks small, and demoting it to h3 to get that would damage the
outline a screen reader reads.
Heading level 1
Heading level 2
Level 2, size lg
<Heading level={2} size="lg">Section that looks small</Heading>Text
Default body copy
Muted, small
Subtle, extra small
Danger
120,456.50 — tabular numerals
<Text size="sm" tone="muted">Supporting copy</Text><Text numeric>120,456.50</Text>| Prop | Type | Default | Notes |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Type scale step. |
| tone | Tone | 'muted' | 'subtle' | 'neutral' | Semantic colour, or the two reading-level greys. |
| weight | 'regular' | 'medium' | 'semibold' | 'regular' | Weight token. |
| numeric | boolean | false | Tabular numerals — use it for anything in a column that updates. |
| as | 'p' | 'span' | 'div' | 'p' | Rendered element. |
Do
Turn on numeric for money, counts, and anything that changes in place.
Don't
Leave proportional numerals in a table column — the digits shift sideways on every update.