Text

Interface text in a token type style.

Owner mrn://postgresql/table/shop.public.orders Orders are rolled up nightly from the shop database.

<mm-text variant="label">Owner</mm-text>
<mm-text variant="mono-dense">mrn://postgresql/table/shop.public.orders</mm-text>
<mm-text block>Orders are rolled up nightly from the shop database.</mm-text>

Guidance

Interface text set in one of the token type styles. body (15px) is for prose, dense (13px) for tables, sidebars, metadata and toolbars, caption (12px) for supporting text, label (12px, 600, ink-2, sentence case) for field labels and column headers, and mono or mono-dense for machine strings only: identifiers, MRNs, SQL, types, timestamps and keys. Never use mono as decoration.

tone changes the colour. Status tones (danger, success, warning) must sit beside a word or icon that says the same thing, never colour alone. On raised layers (menus, popovers, dialogs) and inside selected rows, use secondary rather than tertiary for captions, so they stay readable in Peat.

The element is inline by default; set block for a paragraph, which also caps prose at a 75-character measure.

Properties

Property	Attribute	Type	Default	Description
variant	variant	TextVariant	'body'	body (default), body-strong, dense, caption, label, mono or mono-dense.
tone	tone	TextTone	'default'	default, secondary (ink-2), tertiary (ink-3), danger, success or warning. Status tones need a word or icon too.
block	block	boolean	false	Displays as a block, like a paragraph.
numeric	numeric	boolean	false	Tabular figures, for numbers that are compared.

Slots

Slot	Description
Default	The text.

Examples

Every state of mm-text in Storybook, with keyboard and screen reader tests.