PageHeader

PageHeader is used to indicate the title of the current page, as well as optional actions.

Product groups

S. E. All products USD

Props

Component props
Name	Type	Default
`title` Required	`string`	-
	Page title, will always be a level 1 heading. Content should be localized.
`maxWidth`	`number \| string`	-
	Use numbers for pixels: `maxWidth={100}` and strings for percentages: `maxWidth="100%"`. See the max width variant for more info.
`primaryAction`	`Element<typeof Button \| typeof IconButton \| typeof Link \| typeof Tooltip>`	-
	The primary action of the page. Can be Button, Link, Tooltip surrounding an IconButton or a combination of IconButton, Tooltip and Dropdown.
`secondaryAction`	`Element<typeof Button \| typeof IconButton \| typeof Link \| typeof Tooltip>`	-
	A secondary action for the page. Can be Button, Link, Tooltip surrounding an IconButton or a combination of IconButton, Tooltip and Dropdown.
`subtext`	`string`	-
	Used for metadata related to the current page, not designed to describe the title or the current surface. Content should be localized.

Best practices

Product groups

S. E. All products USD

Use only one primary style action in PageHeader .

Settings

Ensure the title of PageHeader matches the title of the item that navigated the user to this page. For instance, if the user selects "Settings" from an overflow menu, the title of PageHeader should also say "Settings".

Settings

Edit profile

Name

Phone

Location

Plan for most PageHeaders to be full width. A maxWidth should only be supplied when the content of the page is center aligned.

Product groups

S. E. All products USD

Don't

Supply more than one primary style action.

Product groups

Product groups are created in order to relate certain products together for tracking purposes

Don't

Use subtext to add a description about the page. It should only be used for metadata.

Settings

Edit profile

Name

Phone

Location

Don't

Use maxWidth when the content of the page is not center aligned.

Accessibility

Be sure to follow any accessibility guidelines for the components used within PageHeader. The heading within PageHeader will be rendered as a level 1 heading, so ensure there are no other level 1 headings present on the page. For headings level 2-6, use Heading. Learn more about creating accessible headings.

Settings

Edit profile

Name

Phone

<Flex direction="column" flex="grow">
  <PageHeader
    title="Settings"
    primaryAction={
      <Tooltip text="Additional options" idealDirection="up">
        <IconButton icon="ellipsis" iconColor="darkGray" size="lg" accessibilityLabel="Additional options"/>
      </Tooltip>
    }
  />
  <Box
    display="flex"
    wrap
    width="80%"
    direction="column"
    marginStart={5}
  >
    <Box flex="grow" paddingX={3} paddingY={3}>
      <Heading size="sm" accessibilityLevel={2}>Edit profile</Heading>
    </Box>

    <Box flex="grow" paddingX={3} paddingY={3}>
      <TextField
        label="Name"
        id="textfield7"
        onChange={() => {}}
        placeholder="Placeholder"
      />
    </Box>

    <Box flex="grow" paddingX={3} paddingY={3}>
      <Box display="flex" wrap marginStart={-3} marginEnd={-3} marginBottom={-3} marginTop={-3}>
        <Box flex="grow" paddingX={3} paddingY={3}>
          <TextField
            label="Phone"
            id="textfield8"
            onChange={() => {}}
            placeholder="Placeholder"
          />
        </Box>
        <Box flex="grow" paddingX={3} paddingY={3}>
          <TextField
            label="Email"
            id="textfield9"
            onChange={() => {}}
            placeholder="Placeholder"
          />
        </Box>
      </Box>
    </Box>
  </Box>
</Flex>;

<Flex direction="column" flex="grow">
  <PageHeader
    title="Settings"
    primaryAction={
      <Tooltip text="Additional options" idealDirection="up">
        <IconButton icon="ellipsis" iconColor="darkGray" size="lg" accessibilityLabel="Additional options"/>
      </Tooltip>
    }
  />
  <Box
    display="flex"
    wrap
    width="80%"
    direction="column"
    marginStart={5}
  >
    <Box flex="grow" paddingX={3} paddingY={3}>
      <Heading size="sm" accessibilityLevel={2}>Edit profile</Heading>
    </Box>
    <Box flex="grow" paddingX={3} paddingY={3}>
      <TextField
        label="Name"
        id="textfield7"
        onChange={() => {}}
        placeholder="Placeholder"
      />
    </Box>
    <Box flex="grow" paddingX={3} paddingY={3}>
      <Box display="flex" wrap marginStart={-3} marginEnd={-3} marginBottom={-3} marginTop={-3}>
        <Box flex="grow" paddingX={3} paddingY={3}>
          <TextField
            label="Phone"
            id="textfield8"
            onChange={() => {}}
            placeholder="Placeholder"
          />
        </Box>
        <Box flex="grow" paddingX={3} paddingY={3}>
          <TextField
            label="Email"
            id="textfield9"
            onChange={() => {}}
            placeholder="Placeholder"
          />
        </Box>
      </Box>
    </Box>
  </Box>
</Flex>;

Localization

Be sure to localize the title, subtext and actions within PageHeader.

Langer Seitentitel, der in einigen Sprachen möglicherweise abgeschnitten wird

2.131 Produkte

<PageHeader
  title="Langer Seitentitel, der in einigen Sprachen möglicherweise abgeschnitten wird"
  subtext="2.131 Produkte"
  primaryAction={<Button color="red" size="lg" text="Schnell erstellen" />}
/>;

<PageHeader
  title="Langer Seitentitel, der in einigen Sprachen möglicherweise abgeschnitten wird"
  subtext="2.131 Produkte"
  primaryAction={<Button color="red" size="lg" text="Schnell erstellen" />}
/>;

Variants

Primary action

PageHeader supports an optional primaryAction. It can be a Button, a Link or an IconButton with a Tooltip and optional Dropdown. Any Buttons or IconButtons should be size="lg".

Product groups

S. E. All products USD

Kitchen Reno Ideas

Create campaign

Switch to quick ad creation

function PrimaryActionExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const handleSelect = ({ item }) => {
    if (selected.some((selectedItem) => selectedItem.value === item.value)) {
      setSelected((selected) =>
        selected.filter((selectedItem) => selectedItem.value != item.value),
      );
    } else {
      setSelected((selected) => [...selected, item]);
    }
  };

  return (
    <Flex gap={8} direction="column" flex="grow">
      <PageHeader
        title="Product groups"
        subtext="S. E. All products USD"
        primaryAction={<Button color="red" size="lg" text="Create group" />}
      />
      <Divider />
      <PageHeader
        title="Kitchen Reno Ideas"
        primaryAction={
          <React.Fragment>
            <Tooltip idealDirection="up" text="Board options">
              <IconButton
                accessibilityControls="page-header-example"
                accessibilityHaspopup
                accessibilityExpanded={open}
                accessibilityLabel="Board options"
                icon="ellipsis"
                iconColor="darkGray"
                selected={open}
                onClick={() => setOpen((prevVal) => !prevVal)}
                ref={anchorRef}
                size="lg"
              />
            </Tooltip>
            {open && (
              <Dropdown
                id="page-header-example"
                anchor={anchorRef.current}
                onDismiss={() => {
                  setOpen(false);
                }}
              >
                <Dropdown.Item
                  handleSelect={handleSelect}
                  selected={selected}
                  option={{
                    value: 'Edit Board',
                    label: 'Edit Board',
                  }}
                />
                <Dropdown.Item
                  handleSelect={handleSelect}
                  selected={selected}
                  option={{ value: 'Share', label: 'Share' }}
                />
                <Dropdown.Item
                  handleSelect={handleSelect}
                  selected={selected}
                  badgeText="New"
                  option={{
                    value: 'Merge',
                    label: 'Merge',
                  }}
                />
              </Dropdown>
            )}
          </React.Fragment>
        }
      />
      <Divider />
      <PageHeader
        title="Create campaign"
        primaryAction={
          <Link href="www.pinterest.com">
            <Text weight="bold">Switch to quick ad creation</Text>
          </Link>
        }
      />
    </Flex>
  );
}

function PrimaryActionExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const handleSelect = ({ item }) => {
    if (selected.some((selectedItem) => selectedItem.value === item.value)) {
      setSelected((selected) =>
        selected.filter((selectedItem) => selectedItem.value != item.value),
      );
    } else {
      setSelected((selected) => [...selected, item]);
    }
  };
  return (
    <Flex gap={8} direction="column" flex="grow">
      <PageHeader
        title="Product groups"
        subtext="S. E. All products USD"
        primaryAction={<Button color="red" size="lg" text="Create group" />}
      />
      <Divider />
      <PageHeader
        title="Kitchen Reno Ideas"
        primaryAction={
          <React.Fragment>
            <Tooltip idealDirection="up" text="Board options">
              <IconButton
                accessibilityControls="page-header-example"
                accessibilityHaspopup
                accessibilityExpanded={open}
                accessibilityLabel="Board options"
                icon="ellipsis"
                iconColor="darkGray"
                selected={open}
                onClick={() => setOpen((prevVal) => !prevVal)}
                ref={anchorRef}
                size="lg"
              />
            </Tooltip>
            {open && (
              <Dropdown
                id="page-header-example"
                anchor={anchorRef.current}
                onDismiss={() => {
                  setOpen(false);
                }}
              >
                <Dropdown.Item
                  handleSelect={handleSelect}
                  selected={selected}
                  option={{
                    value: 'Edit Board',
                    label: 'Edit Board',
                  }}
                />
                <Dropdown.Item
                  handleSelect={handleSelect}
                  selected={selected}
                  option={{ value: 'Share', label: 'Share' }}
                />
                <Dropdown.Item
                  handleSelect={handleSelect}
                  selected={selected}
                  badgeText="New"
                  option={{
                    value: 'Merge',
                    label: 'Merge',
                  }}
                />
              </Dropdown>
            )}
          </React.Fragment>
        }
      />
      <Divider />
      <PageHeader
        title="Create campaign"
        primaryAction={
          <Link href="www.pinterest.com">
            <Text weight="bold">Switch to quick ad creation</Text>
          </Link>
        }
      />
    </Flex>
  );
}

Secondary action

PageHeader also supports an optional secondaryAction. It will likely be a Button or an IconButton with a Tooltip and optional Dropdown. Any Buttons or IconButtons should be size="lg".

Product groups

S. E. All products USD

Custom reports

function SecondaryActionExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const handleSelect = ({ item }) => {
    if (selected.some((selectedItem) => selectedItem.value === item.value)) {
      setSelected((selected) =>
        selected.filter((selectedItem) => selectedItem.value != item.value),
      );
    } else {
      setSelected((selected) => [...selected, item]);
    }
  };

  return (
    <Flex gap={8} direction="column" flex="grow">
      <PageHeader
        title="Product groups"
        subtext="S. E. All products USD"
        primaryAction={<Button color="red" size="lg" text="Create product group" />}
        secondaryAction={<Button text="Promote" size="lg"/>}
      />
      <Divider />
      <PageHeader
        title="Custom reports"
        primaryAction={<Button color="red" size="lg" text="Create new report" />}
        secondaryAction={
          <React.Fragment>
            <Tooltip idealDirection="up" text="Board options">
              <IconButton
                accessibilityControls="page-header-example"
                accessibilityHaspopup
                accessibilityExpanded={open}
                accessibilityLabel="Board options"
                icon="ellipsis"
                iconColor="darkGray"
                selected={open}
                onClick={() => setOpen((prevVal) => !prevVal)}
                ref={anchorRef}
                size="lg"
              />
            </Tooltip>
            {open && (
              <Dropdown
                id="page-header-example"
                anchor={anchorRef.current}
                onDismiss={() => {
                  setOpen(false);
                }}
              >
                <Dropdown.Item
                  handleSelect={handleSelect}
                  selected={selected}
                  option={{
                    value: 'Share Report',
                    label: 'Share Report',
                  }}
                />
                <Dropdown.Item
                  handleSelect={handleSelect}
                  selected={selected}
                  option={{ value: 'Help center', label: 'Help center' }}
                />
                <Dropdown.Item
                  handleSelect={handleSelect}
                  selected={selected}
                  badgeText="New"
                  option={{
                    value: 'Delete',
                    label: 'Delete',
                  }}
                />
              </Dropdown>
            )}
          </React.Fragment>
        }
      />
    </Flex>
  );
}

function SecondaryActionExample() {
  const [open, setOpen] = React.useState(false);
  const [selected, setSelected] = React.useState([]);
  const anchorRef = React.useRef(null);
  const handleSelect = ({ item }) => {
    if (selected.some((selectedItem) => selectedItem.value === item.value)) {
      setSelected((selected) =>
        selected.filter((selectedItem) => selectedItem.value != item.value),
      );
    } else {
      setSelected((selected) => [...selected, item]);
    }
  };
  return (
    <Flex gap={8} direction="column" flex="grow">
      <PageHeader
        title="Product groups"
        subtext="S. E. All products USD"
        primaryAction={<Button color="red" size="lg" text="Create product group" />}
        secondaryAction={<Button text="Promote" size="lg"/>}
      />
      <Divider />
      <PageHeader
        title="Custom reports"
        primaryAction={<Button color="red" size="lg" text="Create new report" />}
        secondaryAction={
          <React.Fragment>
            <Tooltip idealDirection="up" text="Board options">
              <IconButton
                accessibilityControls="page-header-example"
                accessibilityHaspopup
                accessibilityExpanded={open}
                accessibilityLabel="Board options"
                icon="ellipsis"
                iconColor="darkGray"
                selected={open}
                onClick={() => setOpen((prevVal) => !prevVal)}
                ref={anchorRef}
                size="lg"
              />
            </Tooltip>
            {open && (
              <Dropdown
                id="page-header-example"
                anchor={anchorRef.current}
                onDismiss={() => {
                  setOpen(false);
                }}
              >
                <Dropdown.Item
                  handleSelect={handleSelect}
                  selected={selected}
                  option={{
                    value: 'Share Report',
                    label: 'Share Report',
                  }}
                />
                <Dropdown.Item
                  handleSelect={handleSelect}
                  selected={selected}
                  option={{ value: 'Help center', label: 'Help center' }}
                />
                <Dropdown.Item
                  handleSelect={handleSelect}
                  selected={selected}
                  badgeText="New"
                  option={{
                    value: 'Delete',
                    label: 'Delete',
                  }}
                />
              </Dropdown>
            )}
          </React.Fragment>
        }
      />
    </Flex>
  );
}

Subtext

subtext should be used to add metadata about the content on the page, not to describe the page itself.

Create product group

2,131 products

<PageHeader
  title="Create product group"
  subtext="2,131 products"
  primaryAction={<Button color="red" size="lg" text="Quick create" />}
/>;

<PageHeader
  title="Create product group"
  subtext="2,131 products"
  primaryAction={<Button color="red" size="lg" text="Quick create" />}
/>;

Max width

maxWidth should be set when the content of the page is centered and/or has a maximum width itself.

All boards

Keerthi M.

@kreethiM

4 followers · 0 following

<Box width="100%" color="lightGray" padding={2}>
  <Box color="white" marginBottom={4} >
    <PageHeader
      title="All boards"
      maxWidth="65%"
      primaryAction={
        <Tooltip text="Additional options" idealDirection="up">
          <IconButton icon="ellipsis" iconColor="darkGray" size="lg" accessibilityLabel="Additional options"/>
        </Tooltip>
      }
    />
  </Box>
  <Flex direction="column" alignItems="center" justifyContent="center" gap={1}>
    <Avatar size="lg" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" name="Keerthi" />
    <Heading size="md">Keerthi M.</Heading>
    <Text>@kreethiM</Text>
    <Text weight="bold">4 followers · 0 following </Text>
  </Flex>
</Box>;

<Box width="100%" color="lightGray" padding={2}>
  <Box color="white" marginBottom={4} >
    <PageHeader
      title="All boards"
      maxWidth="65%"
      primaryAction={
        <Tooltip text="Additional options" idealDirection="up">
          <IconButton icon="ellipsis" iconColor="darkGray" size="lg" accessibilityLabel="Additional options"/>
        </Tooltip>
      }
    />
  </Box>
  <Flex direction="column" alignItems="center" justifyContent="center" gap={1}>
    <Avatar size="lg" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" name="Keerthi" />
    <Heading size="md">Keerthi M.</Heading>
    <Text>@kreethiM</Text>
    <Text weight="bold">4 followers · 0 following </Text>
  </Flex>
</Box>;

Heading
Heading should be used to create level 2-6 headings on a page. If a level 1 heading is needed, use PageHeader.

Edit page on GitHub

PageHeader

Product groups

Props

Best practices

Product groups

Settings

Settings

Edit profile

Product groups

Product groups

Settings

Edit profile

Accessibility

Settings

Edit profile

Localization

Langer Seitentitel, der in einigen Sprachen möglicherweise abgeschnitten wird

Variants

Primary action

Product groups

Kitchen Reno Ideas

Create campaign

Secondary action

Product groups

Custom reports

Subtext

Create product group

Max width

All boards

Keerthi M.

Related