SectionHeader

Use cases

• Group a block of fields inside a card-driven settings panel or permission editor.
• Pair with a description to explain the section's purpose in one sentence.
• Add an inline action (button, badge, link) when the section has a single contextual control.

When NOT to use

• For the top of a whole page → use TitleBar.
• For a standalone heading in prose → use a plain <h2> / <h3>.

Heading semantics

The component intentionally renders a <div>, not a heading element — it doesn't know what level fits your page outline. If heading semantics matter (most cases), pass an <h2> / <h3> as the title:

<SectionHeader
  title={<h3 className="m-0 text-inherit font-inherit">Module access</h3>}
  description="Set the access level per module."
/>

Composition

• title accepts any ReactNode — strings, headings, badges-inside-titles.
• description is plain muted text. Keep it short — one sentence, no more than two.
• action is a flex-shrink-0 slot on the right; ideal for a count <Badge> or a small <Button size="sm">.
• Use padding, paddingX, paddingY, or side-specific padding props when the header owns its surface.
• Use margin, marginX, marginY, or side-specific margin props to remove wrapper spacing without extra utility divs.
• Use surface, border, radius, and shadow for contained section headers. These map to design-system tokens and remain dark-mode compatible.
• Use className, titleClassName, descriptionClassName, contentClassName, and actionClassName for Tailwind token overrides. Do not pass raw hex colors; use MiHCM or Tailwind semantic utilities.

Layout controls

Spacing props accept none, xs, sm, md, lg, or xl. Specific props override broad props:

<SectionHeader
  title="Payroll controls"
  description="Review cut-off dates, approvals, and exception rules."
  surface="muted"
  padding="lg"
  paddingTop="md"
  margin="none"
  marginBottom="lg"
  border="full"
  radius="lg"
/>

Surface options are transparent, card, muted, primary, accent, success, warning, and destructive. Colored surfaces automatically switch the title and description to foreground-safe text.

Related

• TitleBar — page-level heading with icon and supertitle.
• Text — typography primitive for standalone headings.
• Separator — visual divider between sections.