Section Header

A title, subtitle, and actions row for a page section, with Section for consistent spacing.

Section with header

SectionHeader puts the title, an optional badge and info tooltip, and the subtitle on the left and its children on the right. Wrap it and the content below in Section for consistent vertical spacing.

Citation opportunities

Beta
Sites that cite your competitors but not your brand.
  • g2.comCites 4 competitors
  • capterra.comCites 3 competitors
  • zapier.com/blogCites 2 competitors

Loading

isTitleLoading and isSubtitleLoading swap the text for skeletons while it loads.

SectionHeader Properties

titleRequired
string

Section title.

subtitle
string

Supporting text below the title.

children
ReactNode

Actions aligned to the right.

badge
ReactNode

Content shown next to the title.

tooltipContent
ReactNode

Shows an info icon with this tooltip next to the title.

titleTooltip
ReactNode

Underlines the title and shows this tooltip on it.

isTitleLoading
boolean

Replaces the title with a skeleton.

Default: false

isSubtitleLoading
boolean

Replaces the subtitle with a skeleton. Has no effect without a subtitle.

Default: false

id
string

Anchor id for linking to the section.

className
string

Additional classes for the header row.

childrenClassName
string

Additional classes for the actions wrapper.

subtitleClassName
string

Additional classes for the subtitle.

tooltipIconClassName
string

Additional classes for the info icon shown by tooltipContent.

Section Properties

childrenRequired
ReactNode

Section content.

spacing
boolean

Adds vertical spacing between children.

Default: true

className
string

Additional classes for the section.