Organisms

Page header

Dashboard page-level title block. Greeting or page title on the left with an optional edit action, and an optional status badge on the right. Sits inside the page, below the shell top bar.

Updated Jul 10, 2026 by Leonardo Posada

Live preview

Good morning, Julian!

Today is Friday, July 10

Active
<PageHeader
  title="Good morning, Julian!"
  subtitle="Today is Friday, July 10"
  onEdit={() => setEditing(true)}
  badge={{ label: "Active", tone: "success" }}
/>

Anatomy

Two zones: left holds the h1 + optional pencil edit + optional subtitle line; right holds a status badge (success by default). The entry uses animate-cascade with a small delay so it settles just after the shell.

Good morning, Julian!

Today is Friday, July 10

Active
  1. 1
    Title

    h1, text-3xl, semibold, tracking-tight. For Home this reads 'Good {morning|afternoon|evening}, {name}!'; for detail pages it's the entity name.

  2. 2
    Edit action

    Optional PencilSimpleLine (light) button next to the title. Opens name edit or rename flow.

  3. 3
    Subtitle

    Muted text-base under the title. On Home it renders 'Today is {formatted date}'.

  4. 4
    Status badge

    Right side, small rounded chip with tone (success/info/warning/muted). CheckCircle fill shows on success by default.

When to use

  • Home greeting screen ('Good morning, {name}!').
  • Detail page title with account status or environment badge.
  • Any page where a strong title + subtitle + a piece of status metadata frame the content.

When not to use

  • Modal or Dialog titles — use DialogHeader.
  • Docs pages inside this kit — use shell/PageHeader (which has eyebrow + tokens for docs).
  • List pages that need filters + tabs above the table — use a compact title row instead.

Usage

Do
  • Keep the badge tone semantic — success/info/warning/muted communicate real state.
  • Use the pencil action only when the title is user-editable (e.g. account name).
  • Match the entry delay to the shell — 100ms is the canonical default.
Don't
  • Don't crowd the right side with multiple actions — that belongs in a toolbar row underneath.
  • Don't hardcode red/green hex on the badge — use tone tokens.
  • Don't confuse this with the shell top bar — this is content, not chrome.

Composition

Place PageHeader as the first block inside the main content area, right below the sticky TopBar. It self-animates once on mount with animate-cascade.

Tiendamia BR

Account · Payments

Sandbox
<PageHeader
  title="Tiendamia BR"
  subtitle="Account · Payments"
  badge={{ label: "Sandbox", tone: "info" }}
/>