Skip to main content
MACAW

Text

Atombeta@macaw-ds/ui · since 0.1.0

Renders text in a named typographic role and tone. Every string on screen goes through it; nothing else sets font size or colour.

Open gallery

When to use

Every string on screen. Headings, body copy, labels, captions, money, dates, IDs. Text is how the type scale and the colour tokens reach the page, so there is no other way to set a font size in MACAW.

When not to use

  • Inside Button, Badge and other components that already style their own label. Pass plain children.
  • For long-form prose with its own markup (articles, help centres). MACAW is for product UI; use a prose stylesheet there.

Anatomy

One element, chosen with as. The variant sets size, line height, weight and tracking together, so a variant is a complete decision rather than four separate ones.

Numbers

numeric turns on tabular numerals and the 7:1 numeric colour. Use it, or a numeric-* variant, for every value a reader might scan down a column: balances, counts, percentages, dates. Align money to the end.

Accessibility

  • Choose as for structure. Screen readers navigate by heading level; the variant is visual only.
  • Never signal a state by tone alone. Pair tone="critical" with words such as "Overdue".
  • truncate hides text. Put the full value in title or a tooltip.

Do and don't

Do

  • Use heading-sm for card titles and panel headers.

  • Use caption with tone="muted" for helper text under a field.

Don't

  • Do not use display roles inside cards or tables.

  • Do not use tone="muted" for anything the user must read to act (errors, amounts).

Rules

Hard rules an agent must follow. The reviewer agent and the lint config check the ones that can be checked.

  1. All text goes through Text. Never apply text-* or font-* utilities to raw elements.
  2. Money, counts and dates use numeric (or a numeric-* role) so columns line up.
  3. Heading levels descend without skipping.
  4. label elements use htmlFor and point at the control's id.

Related