Page Heading

Per-page title bar — optional leading icon, badge, description, icon-button cluster, action buttons, and a tabs row.

Maintenance requests

<PageHeading title="Maintenance requests" />

Request #4287

In progress

Reported 2 days ago · Lobby HVAC

<PageHeading
  icon={faWrench}
  title="Request #4287"
  badge={
    <Badge type="surface">In progress</Badge>
  }
  description="Reported 2 days ago · Lobby HVAC"
  iconButtons={
    <>
      <IconButton
        icon={faArrowUpRightFromSquare}
        type="ghost"
        size="sm"
        aria-label="Share"
      />
      <IconButton
        icon={faEllipsis}
        type="ghost"
        size="sm"
        aria-label="More actions"
      />
    </>
  }
  buttons={
    <>
      <Button variant="outline">Cancel</Button>
      <Button>Save</Button>
    </>
  }
/>

Building 4

<PageHeading
  title="Building 4"
  buttons={
    <Button variant="outline" icon={faPlus}>
      New request
    </Button>
  }
  tabs={
    <>
      <PageHeading.Tab active>
        Overview
      </PageHeading.Tab>
      <PageHeading.Tab>Requests</PageHeading.Tab>
      <PageHeading.Tab>Equipment</PageHeading.Tab>
    </>
  }
/>

Props

title:string

Page title rendered as text-heading-1.

icon:IconDefinition

Optional 24px decorative leading icon (icon/default muted).

badge:ReactNode

Optional badge shown beside the title (e.g. a status <Badge>).

description:string

Optional sub-line below the title row.

iconButtons:ReactNode

Icon-button cluster after the title/badge (e.g. ghost IconButtons).

buttons:ReactNode

Right-aligned action buttons (e.g. outline + default Button).

tabs:ReactNode

Tabs row below the heading — pass <PageHeading.Tab> children.

Tokens