Text

When to use

Text is for body copy, labels, captions and figures. Size, weight and colour come from tokens; you do not write classes by hand.

When not to use

• For headings: Heading builds the document structure; do not enlarge Text to look like a heading.
• To add classes: Do not change size or colour with className; use size, weight and tone.
• For links and actions: Text is not clickable; use Button for an action.

Anatomy

Text has one part: a <span> (or the element you give with render).

1. Root: the type style chosen by size and weight, the colour chosen by tone, and a line limit with truncate.

Behaviour

• Defaults are size="md" (14 px), weight="regular" and tone="default".
• weight="medium" gives the label style of the same size (sm 12 px, md 14 px).
• lg (16 px) has the regular weight only; lg with medium fails type checking.
• truncate cuts at one line (true) or at 2-6 lines; give the full text to the user another way.
• numeric turns on equal-width digits (tabular-nums).
• Margin is zero (m-0); the surrounding Stack or Inline sets the spacing.

Guidelines

Do not let colour carry meaning alone

Error: the field cannot be empty.

DoThe text states the problem; the tone only supports it.

Field

Don'tOnly the colour carries the meaning.

Give the full text of truncated copy

Sample text is a very long sentence

DoThe full text is reachable through title.

Sample text is a very long sentence

Don'tThere is no way to see the cut part.

Content

• Write in sentence case; avoid needless capitals.
• Keep labels short; put detail in a description.
• Use numeric when numbers or dates sit in a column.

Related components

• Heading: Page and section headings.
• Stack: Puts spacing between text blocks.
• Badge: Shows a status with a short coloured label.