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

Product groups

Product groups

Beta
S. E. All products USD. Learn more
Spend
$1.23M
29%

Props

Component props
Name
Type
Default
title
Required
string
-

Page title. Will always be a level 1 heading. Content should be localized.

badge
{| text: string, tooltipText?: string |}
-

Add a badge displayed after the title. Be sure to localize the text.

borderStyle
"sm" | "none"
"none"

Specify a bottom border style for PageHeader: "sm" is 1px.

dropdownAccessibilityLabel
string
-

Label used for screen readers to provide information about the IconButton replacing actions the sm breakpoint.

helperIconButton
{| accessibilityLabel: string, accessibilityControls: string, accessibilityExpanded: boolean, onClick: ({| event: | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> | SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement>, dangerouslyDisableOnNavigation: () => void, |}) => void, |}
-

Helper IconButton to be placed after the title for a supplemental Call To Action (CTA).

{| text: string, accessibilityLabel: string, href: string, onClick: ({| event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement>, dangerouslyDisableOnNavigation: () => void, |}) => void, |}
-

Helper Link to be placed after the subtext.

items
$ReadOnlyArray<React.Node>
-

Optional row of components.

maxWidth
Dimension
"100%"

Use numbers for pixels: `maxWidth={100}` and strings for percentages: `maxWidth="100%"`. See the max width variant for more info.

primaryAction
{| component: React.Element<typeof Button | typeof IconButton | typeof Link | typeof Text | typeof Tooltip>>, dropdownItems: $ReadOnlyArray<React.Element<typeof DropdownItem | typeof DropdownLink>>> |}
-

The primary action of the page. Can be Button, Link, Tooltip surrounding IconButton or a combination of IconButton, Tooltip and Dropdown. Primary and secondary actions are replaced with a Dropdown under the sm breakpoint. primaryAction takes both the main component and its equivalent using Dropdown subcomponents.

secondaryAction
{| component: React.Element<typeof Button | typeof IconButton | typeof Link | typeof Text | typeof Tooltip>>, dropdownItems: $ReadOnlyArray<React.Element<typeof DropdownItem | typeof DropdownLink>>> |}
-

A secondary action for the page. Can be Button, Link, Tooltip surrounding IconButton or a combination of IconButton, Tooltip and Dropdown. secondaryAction takes both the main component and its equivalent using Dropdown subcomponents.

subtext
string
-

Used for metadata related to the current page, not designed to describe the title or the current surface. Content should be localized.

thumbnail
React.Element<typeof Image>
-

An optional thumbnail image to be displayed next to the title.

Best practices

Product groups

Product groups

S. E. All products USD
Do

Use only one primary style action in PageHeader .

Settings

Settings

Do

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

Settings

Edit profile

Do

Plan for most PageHeaders to be full width. A maxWidth should only be supplied when the content of the page is center aligned. Content should match PageHeader's 32px start/end padding.

Product groups

Product groups

S. E. All products USD
Don't

Supply more than one primary style action.

Product groups

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

Settings

Edit profile

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

Settings

Edit profile

Localization

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

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

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

2.131 Produkte

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

Product groups

S. E. All products USD

Kitchen Reno Ideas

Kitchen Reno Ideas


Product groups

Product groups

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

Product groups

S. E. All products USD

Custom reports

Custom reports

Subtext

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

Create product group

Create product group

2,131 products

Max width

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

All boards

All boards

KeerthiK

Keerthi M.

@kreethiM
4 followers · 0 following

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