Heading
Semantic, sized display titles.
Usage
A single Heading component renders any h1–h6 element. Visual size is decoupled from the semantic level.
Ship it
Levels
The level prop controls the rendered HTML element for correct document
structure. Size is set separately.
Heading h1
Heading h2
Heading h3
Heading h4 — no size, inherits
Sizes
Three visual sizes via the size prop, all driven by --sve-font-size-* tokens.
Large display heading
Medium section heading
Small label heading
Colors
Semantic color tokens via the color prop. Defaults to inherit so it picks up the parent's foreground color automatically.
Primary
Success
Warning
Danger
Secondary
Props
Plus every native heading attribute via prop spreading.
| Prop | Type | Default |
|---|---|---|
level HTML heading element rendered (h1–h6). | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
size Visual size. Decoupled from semantic level. | 'sm' | 'md' | 'lg' | — |
weight | 'normal' | 'medium' | 'bold' | 'bold' |
color | 'inherit' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default' | 'inherit' |
class Extra classes merged onto the root. | string | — |
children Heading text content. | Snippet | — |