PrimitivesStable

Text

Parity report: docs/atoms.md

The DS's typographic primitive. One <Text> covers body, label, caption, heading and link — variant is any of the 17 --text-* keys (default body-m), and the tokens are already responsive (mobile version below 768px, no extra work).

as picks the element (span default · p · div · label · strong · h1–h6…); tone is the semantic color (inherit default · headings · paragraphs · highlight · disabled · success/warning/error/info); weight, align, truncate (1 line) and lineClamp={N}. Always margin: 0.

When to use

Any body text, label, caption or emphasis — instead of a bare <p> / <span> with hand-set font.
A title with semantic weight (<h1>…) → Heading. A navigable link → the DS Link.

Examples

The scale

heading-xl — O rato roeu a roupa

heading-l — O rato roeu a roupa

heading-m — O rato roeu a roupa

heading-s — O rato roeu a roupa

heading-xs — O rato roeu a roupa

body-l — O rato roeu a roupa

body-m — O rato roeu a roupa

body-s — O rato roeu a roupa

body-xs — O rato roeu a roupa

label-m — O rato roeu a roupa

caption — O rato roeu a roupa

<Text as="p" variant="heading-xl" tone="headings">heading-xl</Text>
<Text as="p" variant="body-m">body-m</Text>
<Text as="p" variant="caption">caption</Text>

Tones

headings

paragraphs

highlight

disabled

success

warning

error

<Text as="p" tone="headings">headings</Text>
<Text as="p" tone="paragraphs">paragraphs</Text>
<Text as="p" tone="highlight">highlight</Text>
<Text as="p" tone="disabled">disabled</Text>
<Text as="p" tone="error">error</Text>

Truncate and clamp

Uma linha só, cortada com reticências quando não cabe no contêiner

Duas linhas: lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

<Text as="p" truncate>Uma linha só, cortada com reticências quando não cabe</Text>
<Text as="p" lineClamp={2}>Duas linhas: lorem ipsum dolor sit amet…</Text>

Playground

O rato roeu a roupa do rei de Roma

variant

tone

weight

<Text as="p">O rato roeu a roupa do rei de Roma</Text>

Props

Prop	Type	default	Description
`align`	`"start" \| "center" \| "end" \| "justify"`	`—`	—
`as`	`enum`	`—`	Elemento renderizado. Default `"span"`.
`lineClamp`	`number`	`—`	Trunca em N linhas (`-webkit-line-clamp`).
`tone`	`"inherit" \| "headings" \| "paragraphs" \| "highlight" \| "disabled" \| "pure-white" \| "success" \| "warning" \| "error" \| "info"`	`inherit`	Cor semântica. Default `"inherit"`.
`truncate`	`boolean`	`false`	Trunca em 1 linha com reticências.
`variant`	`enum`	`body-m`	Chave de `--text-*` (17 estilos, já responsivos). Default `"body-m"`.
`weight`	`"regular" \| "medium" \| "semibold" \| "bold"`	`—`	Sobrescreve o peso do `variant`.

Accessibility

Choose as by meaning, not by size: a visually small subhead can still be as="h2". truncate / lineClamp clip visually — the full text stays in the DOM for the screen reader.