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

The typography primitive. `variant` picks size, line height, weight and tracking from the type scale; `tone` picks the colour; `as` picks the HTML element for semantics. `numeric` switches on tabular numerals and the 7:1 numeric colour for money, counts and dates.

Playground

Controls are generated from the manifest; the snippet is what the CLI prints. Show focus and Reduced motion appear only when they apply.

Frame theme

Available balance

Examples
import { Text } from '@macaw-ds/ui';

<Text>Available balance</Text>

Controls

Rendered element. Choose for meaning: h2 for a section title, label for a field, time for a date.

Typographic variant from the scale. Independent of the element, so an h2 can use heading-sm in a dense panel.

Colour. primary and numeric meet 7:1; the rest meet 4.5:1 on every surface in both themes.

align

Text alignment. Money columns align end.

Tabular numerals plus the numeric colour (unless tone is set). Use for every number that will be compared or summed.

One line with an ellipsis.

The text.

Examples

The named exports of the examples file, rendered as they ship.

  • Default

    Available balance

  • Money

    $12,480.00

    $1,112.40

    -$320.00

  • Roles

    Display lg

    Display md

    Heading lg

    Heading md

    Heading sm

    Body lg: the quick brown fox settles the invoice.

    Body md: the quick brown fox settles the invoice.

    Body sm: the quick brown fox settles the invoice.

    Label mdLabel sm

    Caption: updated 2 minutes ago

    code: txn_1Nv2hZ
  • Tones

    primary

    secondary

    muted

    numeric

    success

    warning

    critical

    info

    accent

  • Truncated

    A very long merchant descriptor that will not fit on one line