Section heading

Section heading titles a section within a page. It renders an <h3> by default; use the as prop to render other heading levels (h2–h6).

#Example

#Usage

#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 a section within a page or card.

#When not to use

• If you're titling something top-level like a page or dialog, use a heading instead.
• For smaller headings inside a card, use a text component with size="lg" and fontWeight="medium" instead.

#Props

Inherits color and margin props.

Name	Default	Description
isTruncated	false	boolean Truncate overflowing text with an ellipsis if needed.
as	"h3"	"h2" | "h3" | "h4" | "h5" | "h6" Heading element.
children	—	ReactNode Heading text.
textAlign	—	"left" | "center" | "right" Text alignment.
color	—	Color The CSS `color` property.