Page header

A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs buttons, search, and filters.

#Default

A page header is a title and, when 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>