Composant · Divers

Typography

Stable

Composant de texte unique pour toute la hiérarchie : la variante choisit l'échelle et la balise HTML par défaut, surchargeable via as.

Exemples

Échelle de variantes

Display

Titre h2

Texte courant body.

OVERLINE

Voir le code (Svelte)

<Typography variant="display">Display</Typography>
<Typography variant="h2">Titre h2</Typography>
<Typography variant="body">Texte courant body.</Typography>
<Typography variant="overline" tone="muted">OVERLINE</Typography>

Poids, ton, alignement

Gras

Ton secondaire

Ton lien

Aligné à droite

Voir le code (Svelte)

<Typography variant="body" weight="bold">Gras</Typography>
<Typography variant="body" tone="secondary">Ton secondaire</Typography>
<Typography variant="body" tone="link">Ton lien</Typography>
<Typography variant="body" align="end">Aligné à droite</Typography>

API

Prop	Type	Default
`variant`	`"display" \| "h1"…"h6" \| "body" \| "body-sm" \| "caption" \| "overline"`	`"body"`
`as`	`string`	déduit de la variante
`weight`	`"regular" \| "medium" \| "semibold" \| "bold"`	–
`tone`	`"primary" \| "secondary" \| "muted" \| "inverse" \| "link"`	–
`align`	`"start" \| "center" \| "end" \| "justify"`	–
`truncate`	`boolean`	`false`

Chaque variante mappe une balise par défaut (display/h1 → h1, body → p, caption/overline → span), surchargeable via as.

Tokens utilisés

--st-semantic-text-primary · --st-semantic-text-secondary
--st-typography-* (tailles et graisses)