PageHeader

When to use

PageHeader sits at the top of every page: it tells users where they are, what the page is and which main actions they can take here. Use the same structure on list, detail and settings pages.

When not to use

• For sections inside a page: Use a Heading for section titles.
• For dialogs and drawers: They have their own title area.
• For the app’s top bar: Account and language menus live in the AppShell top bar.

Anatomy

1. Home
2. First level
3. Page title

First level

Page title

Active

A one or two sentence description of what the page is for.

Secondary buttonPrimary button

LightDark

Copy code

import { Badge, Button, PageHeader, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <PageHeader
        title="Page title"
        description="A one or two sentence description of what the page is for."
        breadcrumbs={[{ label: 'Home', href: '#' }, { label: 'First level', href: '#first' }, { label: 'Page title' }]}
        meta={<Badge tone="success">Active</Badge>}
        actions={
          <>
            <Button variant="secondary">Secondary button</Button>
            <Button>Primary button</Button>
          </>
        }
      />
    </Provider>
  );
}

1. Breadcrumbs or back link: Breadcrumbs or the back link.
2. Title: An h1 by default; long titles wrap.
3. Status (meta): Next to the title, such as a Badge.
4. Description: One or two sentences in muted text.
5. Actions: At most one primary and two secondary buttons; on the right.

Behaviour

• On wide screens the actions sit to the right of the title; when there is no room they move below. Below 640 px they take the full width and share it equally.
• While loading, a shimmering placeholder replaces the title; the heading stays in place and is read with the loading text. The status is hidden.
• The title fades in when it arrives; with reduced motion only a short fade remains.
• A long trail folds its middle; that behaviour comes from Breadcrumbs.

Guidelines

• Use one PageHeader and one h1 per page.
• The title is the page name; keep it the same as the last breadcrumb.
• The primary action is on the far right; make the others secondary or tertiary.
• Write a description only when the purpose of the page is not obvious.

Content

• The title is a noun phrase without a full stop.
• The description is a full sentence ending with a full stop.

Turkish	English
Sayfa başlığı	Page title
Listeye dön	Back to list
Ayrıntı sayfası	Detail page

Related components

• Breadcrumbs: The trail above the title.
• Tabs: Page sections under the header.
• Button: Page actions.
• AppShell: The frame the page sits in.