Heading renders an h2 by default. Use children for its content, level for document structure, and size for appearance.
Choose a heading level and size
Choose levels in document order. A smaller visual size does not change the level announced by assistive technology.xs, sm, md, and lg use the matching font tokens. Headings have no outer margin; their surrounding layout owns spacing.
Color and composition
Usecolor="secondary" for less prominent headings. tertiary is also available, but its contrast depends on the font size, theme, and background. Check readability when using it.
Native attributes, styles, class names, and refs pass to the heading. Use render to compose with a custom element or component; that element is responsible for preserving heading semantics.
For a heading with supporting text or actions, use Section.
Props
"primary" | "secondary" | "tertiary"
default:"primary"
Theme font color. Defaults to
primary.5 | 1 | 2 | 3 | 4 | 6
default:"2"
Semantic heading level, from
h1 through h6. Does not change the visual size. Defaults to 2.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render."sm" | "md" | "lg" | "xs"
default:"md"
Visual font size, independent of the heading level. Defaults to
md.