Example

When to use

• Use it once at the top of a routed view to introduce the page and anchor its primary actions.
• Pass badge for a short status pill (“New”, “Beta”) and project buttons into slot="actions" for the page's primary actions.

When not to use

• For the persistent application frame around the page — sidebar, top bar, content region — use the App Shell instead; the page header lives inside its content area.
• For a trail of ancestor links above the title, use Breadcrumbs.
• When the body has no content to introduce yet, reach for an Empty State rather than a bare header.

Related components

• App Shell — the frame the header sits within.
• Breadcrumbs — ancestor navigation above the title.
• Button — the controls you project into slot="actions".
• Chip — the directive the badge composes.