Page header

The title block of a view: title, caption, MRN, description, tags, owners and actions.

Commerce Query table

<mm-page-header heading="orders" provider="postgresql"
  caption="1.28M rows · Updated 5 hours ago"
  mrn="mrn://postgresql/table/shop.public.orders"
  description="Every order placed through the storefront and partner API."
  back-href="/discover" back-label="Discover">
  <mm-tag slot="tags">Commerce</mm-tag>
  <mm-button slot="actions" variant="primary">Query table</mm-button>
</mm-page-header>

Guidance

The page header names the object or list a view is about. The title is the one display title in the view (display-title), optionally led by a provider logo or an icon. Under it sit, in order and only when given: a quiet sentence-case caption in the text face and mm-text-2 for facts shown nowhere else on the page ("1,284 rows · Updated 5 hours ago", a hostname), leaving out the kind the breadcrumbs already give; the MRN in mono with a copy button, the one place an MRN is set in mono; a one-sentence description; then labelled rows for Owners, Tags and Links (places to go next, such as the source's own docs or a runbook a rule added), each only when slotted. Actions sit at the end of the title row, with the primary last; when there is no room beside the title they wrap onto their own row, aligned to the start under the caption and MRN. Breadcrumbs or a back link go above.

Actions: one primary button and at most one secondary. A personal toggle such as Subscribe is an icon-only ghost button with pressed, not a labelled secondary. Occasional and destructive actions go into a "More" menu (mm-menu-button with icon more-horiz and the label "More actions") as the first slotted action; places to go belong in the Links row, not in More. The header does not manage its actions, so this is yours to follow: slot at most three things (More, secondary, primary).

Long identifiers such as orders_daily_by_customer_region_rollup_v2 wrap anywhere rather than widening the page. compact is for list pages and workspaces: the title (28px display-section, still the page title), a count and the actions on one line, with the caption (if any) under the title.

Properties

Property	Attribute	Type	Default	Description
heading	heading	string	''	The title. Write identifiers exactly as they are.
level	level	number	1	Outline level of the title.
provider	provider	string	''	Provider key for a leading logo, such as postgresql or kafka.
icon	icon	string	''	Leading Material Symbols icon, when there is no provider.
caption	caption	string	''	A quiet line under the title for facts shown nowhere else, such as "1,284 rows · Updated 5 hours ago" or a hostname. Sentence case, text face, mm-text-2.
mrn	mrn	string	''	The asset's MRN, shown in mono with a copy button.
description	description	string	''	One or two sentences about the object.
backHref	back-href	string	''	Shows a back link above the title.
backLabel	back-label	string	''	Text of the back link, such as "Discover". Defaults to "Back".
compact	compact	boolean	false	List page layout: a smaller title, a count and actions on one line.
count	count	number | undefined		Count shown after the title in compact layout, such as the number of pipelines.

Slots

Slot	Description
heading	The title, if it needs markup. Otherwise use heading.
leading	Leading media, if provider or icon is not enough.
breadcrumbs	Breadcrumbs above the title.
description	The description with markup. Otherwise use description.
tags	mm-tag elements, in a row labelled "Tags".
owners	Owners, such as owner chips, in a row labelled "Owners".
links	Places to go next, such as the source's own docs or a runbook, as small mm-button external buttons with the link's icon, in a row labelled "Links".
actions	Up to one primary (last) and one secondary button; anything else in a "More" mm-menu-button before them.

CSS parts

Part	Description
header	The header element.
back	The back link.
heading	The mm-heading.
caption	The caption (subtitle) line.
mrn	The MRN line.
description	The description.
actions	The actions wrapper.

Examples

Every state of mm-page-header in Storybook, with keyboard and screen reader tests.