Heading

Heading displays large text suitable for page titles, dialog titles or empty state titles.

#

#

#

#

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

#

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 ().

#

Inherits color and margin props.

NameDefaultDescription
isTruncatedfalseboolean

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.

variantundefined"numeric" | "monospace" | "heading"

Variant

On this page

  • Example
  • Usage
  • Sizes
  • Variants
  • Truncated
  • Props