SectionHeader

A generic section header: an optional uppercase eyebrow, a Heading title, an optional muted description, and an optional right-aligned actions slot. Typography is delegated to Heading and Text; the data-slot hooks (section-header-eyebrow / -body / -actions) let adopters retune spacing without forking the component.

Catalog

Porcelain & Stone

Rectified porcelain and honed stone, filtered to in-stock finishes.

Usage

import { SectionHeader, SectionHeaderProps } from "@desk/ui/components/section-header";

Best practices

Renders a <header>, which is a banner landmark only when it is a direct child of <body>. It is built for nested/section use — don't render more than one page-level SectionHeader directly under <body>, or you'll create duplicate banner landmarks.
Set level for the document outline and size for visual scale independently — a visually small header can still be an h2. Use reserveEyebrowSpace to keep an eyebrow-less header aligned beside sibling headers that have an eyebrow.

Props

Prop	Type	Default	Description
actions	`ReactNode`		Right-aligned slot for controls (buttons, menus) beside the title.
description	`ReactNode`		Muted supporting copy rendered below the title.
eyebrow	`ReactNode`		Uppercase kicker rendered above the title using the `.eyebrow` utility.
level	`SectionHeaderLevel \| undefined`	`"2"`	Semantic heading level for the title (`h1`–`h6`); independent of `size`.
reserveEyebrowSpace	`boolean \| undefined`	`false`	Keep the fixed eyebrow-row height even when `eyebrow` is absent, so titles stay aligned across sibling columns.
size	`ResponsiveValue<"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"> \| undefined`	`"base"`	Title size (responsive-capable); the description size tracks it.
title(required)	`ReactNode`		The section title.

Also exports

interfaceSectionHeaderProps

Composition

Builds on

Heading, Text