Heading

Heading displays large text suitable for page titles, dialog titles or empty state titles. It renders an <h2> and sits at the top of the type ramp.

#Example

#Usage

#Sizes

#Variants

The default variant is heading, but you can specify other variants such as numeric and monospace.

#Truncated

When heading content comes from users, it's often too long to fit in the UI. To avoid breaking the layout, truncate the overflowing text with an ellipsis (…).

#Guidelines

#When to use

• When titling something top-level: a page, a dialog, or an empty state.

#When not to use

• If you're titling a section within a page, use a section heading instead.

#Props

Inherits color and margin props.

Name	Default	Description
isTruncated	false	boolean Truncate overflowing text with an ellipsis if needed.
children	—	ReactNode Heading text.
size	"md"	"md" | "lg" | "xl" | "2xl" Heading size.
textAlign	—	"left" | "center" | "right" Text alignment.
variant	undefined	"numeric" | "monospace" | "heading" Variant
color	—	Color The CSS `color` property.