EDS4 logo
@eds/page-header
v4.0.4

PageHeader

Helps users understand what the content of the page is about. The PageHeader should always be at the top of a page.
Prop
Required
Description
Type
breadcrumbs
✅

Props for the Breadcrumbs, which is used to communicate the user's current location in the site's hierarchical structure.

BreadcrumbsProps
heading
✅

The main heading, offers immediate context about the page content.

string
actions
—

Static list of actions. First two actions are displayed as Button, the rest goes into ActionsDropdown

Action[]
avatar
—

Props for the Avatar. The primary avatar, displayed to the left of the title, will always be xlarge. The secondary avatar, displayed at the bottom of the title, will be xsmall.

{ primary?: AvatarProps; secondary?: AvatarProps & { name: string; }; }
badge
—

Props for the Badge, which is used to communicate the current status.

BadgeProps
contextualItems
—

Optional info that can be displayed alongside the badge and/or tag, or on it's own.

ContextualItems
tabs
—

Compose Tabs using a list of NavigationalTabItemProps.

NavigationalTabItemProps[]
tag
—

Specific props for the Tag, which is suitable for highlighting crucial details.

Pick<TagProps, "label" | "disabled" | "maxWidth" | "tone" | "weight">