PrimitivesEstável

Heading

Relatório de paridade: docs/atoms.md

Açúcar sobre o <Text> para títulos. level (1–6, default 2) renderiza <h1>…<h6> semântico e escolhe o token: 1→heading-xl, 2→heading-l, 3→heading-m, 4→heading-s, 5/6→heading-xs.

variant sobrescreve só o visual (um <h1> pode parecer heading-s) — a hierarquia do documento continua correta. tone (default headings), align, truncate.

Quando usar

Todo título de seção ou página — mantém a árvore de headings do documento correta.
Texto que "parece título" mas não é um cabeçalho de conteúdo → Text com variant="heading-*".

Exemplos

Níveis

<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 ≠ semântica

<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	Tipo	padrão	Descrição
`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`.

Acessibilidade

O level é a hierarquia, não o tamanho: não pule níveis (um <h4> não deve vir logo depois de um <h2>). Use variant quando o design pedir um título grande num nível baixo, ou vice-versa.