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
Do

Use only one primary style action in PageHeader .

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

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.

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

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

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

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


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

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

Max width

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

All boards

Keerthi

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.