Text

The typographic primitive over the nine-step scale. Hierarchy comes from variant and tone, not a memorised set of utility classes.

Variants

Display

Heading

Title

Body

Caption

<Text variant="display">Display</Text><Text variant="heading">Heading</Text><Text variant="title">Title</Text><Text variant="body">Body</Text><Text variant="caption">Caption</Text>

Tones

Primary

Secondary

Tertiary

<Text tone="primary">Primary</Text><Text tone="secondary">Secondary</Text><Text tone="tertiary">Tertiary</Text>

Polymorphic

Page title

<Text variant="heading" render={<h1 />}>Page title</Text>

Use render to change the element without losing the typography.

Props

Prop	Type	Default	Notes
`variant`	`'display' \| 'heading' \| 'title' \| 'body' \| 'caption' \| …`	`'body'`	Size and weight from the type scale.
`tone`	`'primary' \| 'secondary' \| 'tertiary' \| 'accent' \| 'danger' \| …`	`'primary'`	Text colour.
`truncate`	`boolean`	`false`	Single-line ellipsis.
`numeric`	`boolean`	`false`	Tabular figures.
`render`	`ReactElement`	—	Swap the rendered element.