Design System/Molecules/Page Heading

Page Heading

A full page header with breadcrumb navigation, title, optional description and metadata, and action buttons.

Molecule

Button · Badge · Breadcrumb

When To Use

  • Use buttons for explicit user-triggered actions such as submit, save, continue, or open.
  • Choose the variant and size that matches the action hierarchy in the surrounding view.
  • Prefer this page when you need to compare action density, icon usage, and loading or disabled states side by side.

When Not To Use

  • Do not use a button when plain text, static status, or passive decoration would communicate the state just as well.
  • Do not overload a single view with too many equally prominent buttons; reduce or demote secondary actions first.

Accessibility Notes

  • Mark the current item clearly with visual state and the appropriate ARIA current/selected semantics.
  • Ensure arrow-key or tab-key movement stays predictable when the pattern behaves like a composite widget.
  • Do not rely on icon-only navigation unless every control has a clear accessible name.

Key Props / API

Props

title, description, breadcrumbs, actions, meta, badge

Example Code

import { PageHeading } from "@hilum/ui"

<PageHeading title="Back End Developer" />

Page Heading · Basic

Title only

Minimal form with just a title

Back End Developer

Page Heading · With breadcrumbs

Back End Developer

Page Heading · Full

With meta, badge & description

Full composition

Back End Developer

New

We're looking for a backend engineer to help build and scale our core platform.

Full-time
Remote
Closes Jan 20