PrimitivesStable

Heading

Parity report: docs/atoms.md

Sugar over <Text> for titles. level (1–6, default 2) renders semantic <h1>…<h6> and picks the token: 1→heading-xl, 2→heading-l, 3→heading-m, 4→heading-s, 5/6→heading-xs.

variant overrides the visual only (an <h1> can look like heading-s) — the document hierarchy stays correct. tone (default headings), align, truncate.

When to use

Every section or page title — keeps the document's heading tree correct.
Text that "looks like a title" but isn't a content heading → Text with variant="heading-*".

Examples

Levels

<h1> — Título de nível 1

<h2> — Título de nível 2

<h3> — Título de nível 3

<h4> — Título de nível 4

<h5> — Título de nível 5

<h6> — Título de nível 6

<Heading level={1}>Título de nível 1</Heading>
<Heading level={2}>Título de nível 2</Heading>
{/* … até level={6} */}

Visual ≠ semantics

<h1> com visual de heading-s

<h4> com visual de heading-l

<Heading level={1} variant="heading-s">&lt;h1&gt; com visual de heading-s</Heading>
<Heading level={4} variant="heading-l">&lt;h4&gt; com visual de heading-l</Heading>

Playground

Título de exemplo

level

tone

<Heading level={2}>Título de exemplo</Heading>

Props

Prop	Type	default	Description
`align`	`"start" \| "center" \| "end" \| "justify"`	`—`	—
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Nível semântico → `<h1>`…`<h6>`. Default `2`.
`tone`	`"inherit" \| "headings" \| "paragraphs" \| "highlight" \| "disabled" \| "pure-white" \| "success" \| "warning" \| "error" \| "info"`	`headings`	Cor semântica. Default `"headings"`.
`truncate`	`boolean`	`—`	—
`variant`	`enum`	`—`	Sobrescreve o token visual (visual ≠ semântica). Default: mapeado do `level`.

Accessibility

level is the hierarchy, not the size: don't skip levels (an <h4> shouldn't follow an <h2> directly). Use variant when the design wants a large title at a low level, or vice versa.