Text

A line of interface copy from a translation key, with the key as its English fallback. Its tone, size, weight and wrapping work alike for a key and for text someone wrote.

Design examples

An exhibition label

Example Code

Display, heading, body and small text keep the square rhythm. The edition uses the mono face.

Different meanings, one baseline

Example Code

Regular, strong, small, warning and danger text retain a consistent line.

Try it

Text and translation keys

Example Code

Slot text is the translation key and the fallback.

Translation keys

Slot content is both the key and the fallback: <ds-text>Save</ds-text>. The text attribute is another way to provide the key. Configure languages and load words before displaying translated content.

Text a person wrote, such as a list’s name or an item, is literal: it is shown as it stands and never looked up.

API

Attribute	Type	Default	What it does
text	string	Empty	Translation key. Without it, slot text supplies the key.
literal	boolean	false	Show the text as written, cut with an ellipsis at its width.
tone	muted, title, warning, danger	None	A quieter grey, the title grey, the warning colour (--ds-warning-color) for something that needs care, or the danger colour (--ds-danger-color) for a failure or a loss.
size	small, heading, display	None	10px; a 13px heading on one square; a 20px title on two squares.
strong	boolean	false	The medium weight.
wrap	boolean	false	Let the text run over several lines, each one square.

Without attributes the element is one control high, so it sits in a row of one square. There is no variant attribute.

Headings and messages

The element reads as plain text. For a heading, give it a role and a level:

<ds-text role="heading" aria-level="2" size="heading">Settings</ds-text>

A message that reports a failure is announced with role="alert":

<ds-text wrap tone="danger" role="alert">Could not save your changes</ds-text>

A warning that asks for care before something goes wrong takes the warning tone: Orange on dark paper, and Orange’s dim brown on light paper, where Orange itself is too light to read.

<ds-text wrap tone="warning">Your trial ends in three days</ds-text>

Like any element, a hidden one stays out of the page: <ds-text hidden> is not drawn.

Interface copy and writing

Copy in an application’s interface (labels, messages, titles) uses ds-text, or the .ds-text classes where the page has no scripts. Long-form and marketing writing stays in native headings, paragraphs and lists, drawn by the prose sheet. Both are Design system 1’s styles.

Keep markup outside the text

The component reads and replaces its slot text. Put an icon next to ds-text in a row rather than nesting markup inside it.

Languages · Prose · Row · Fonts