ComponentsTypography
Heading
Semantic heading with automatic level management.
Use Heading for section headings. It can infer heading level from HeadingLevels context, or you
can pass level directly.
<Heading>Section title</Heading><Heading level={2}>Explicit h2</Heading>Best practices
| Guidance | Practices |
|---|---|
| Do | Prefer automatic leveling for nested sections instead of hardcoding every level. |
| Don't | Skip heading levels, such as an h2 followed directly by an h4. Screen reader users navigate by heading level. |
Automatic leveling
Heading reads its level from HeadingLevels context. Set base on the root context. Each nested
HeadingLevels advances the next heading level.
Heading — Automatic leveling
h1
h2 nested automatically
h3 nested again
The level prop overrides context for one heading without changing the nesting depth for siblings
or children.
Typography
Heading accepts all Text props except fontSize, which is controlled by the heading level. By
default it applies fontWeight="bold" and lineHeight="tight".
Heading — Typography
Informative heading
Light-weight heading
Props
Prop
Type