Page header

A page header sits at the top of a page. It holds a title, and can also hold breadcrumbs, buttons, search and filters.

#Default

A page header holds the title and, if there is one, the main action.

import { Button, PageHeader } from '@wolf-rayet/react';

<PageHeader actions={<Button appearance="primary">Add rep</Button>}>Reps</PageHeader>

#With breadcrumbs and a bottom bar

Put filters and status in the bottom bar.

import { Breadcrumbs, Button, ButtonGroup, Lozenge, PageHeader } from '@wolf-rayet/react';

<PageHeader
  breadcrumbs={<Breadcrumbs items={[{ label: 'Support', href: '#' }, { label: 'Queues', href: '#' }, { label: 'Billing' }]} />}
  actions={
    <ButtonGroup label="Queue actions">
      <Button>Export</Button>
      <Button appearance="primary">Add rep</Button>
    </ButtonGroup>
  }
  bottomBar={
    <>
      <Lozenge appearance="inprogress">18 open</Lozenge>
      <Lozenge appearance="moved">3 escalated</Lozenge>
    </>
  }
>
  Billing queue
</PageHeader>