Components

PageHeader

The top of a page: location, title, status, description and main actions.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls. Narrow the window to see the actions move under the title.

Live example, StorybookOpen in Storybook

Default

PageHeader draws the breadcrumb trail, title, status, description and page actions together. The title is the page’s h1.

Page title

Active

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

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>
  );
}

Back link

Without breadcrumbs, back puts a link to the parent page above the title. size="md" gives a smaller title for nested pages.

Back to list

Detail page

Draft

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

export default function BackLink() {
  return (
    <Provider locale="en-GB">
      <PageHeader
        size="md"
        title="Detail page"
        back={{ href: '#', label: 'Back to list' }}
        meta={<Badge>Draft</Badge>}
      />
    </Provider>
  );
}

Loading

loading shows a placeholder instead of the title; the heading stays in place and is read as “Loading page”. The title fades in when it arrives.

Loading page

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

export default function Loading() {
  return (
    <Provider locale="en-GB">
      <PageHeader title="Page title" loading actions={<Button variant="secondary">Secondary button</Button>} />
    </Provider>
  );
}

Light and dark mode

Colours come from semantic tokens; neither mode needs extra settings.

Page title

Active

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

Page title

Active

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

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>
  );
}