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 | — | Array of up to 3 actions. Each action can be either a Button or ActionsDropdown. Any additional actions are ignored. @example -tsx actions={[ { type: 'button', label: 'Add new', onClick: handleAdd }, { type: 'actionsDropdown', actions: [ { label: 'Export', onClick: handleExport }, { label: 'Delete', onClick: handleDelete, tone: 'critical' }, ], }, ]} - | PageHeaderAction[] |
avatar | — | Avatar to display alongside the heading. Can be either a component function or direct props object. The component will automatically apply size="xlarge" to the avatar. Consumer props will override internal defaults when conflicts occur. @example -tsx // Component function approach avatar={(props) => <Avatar {...props} name="John" src="avatar.jpg" />} // Direct props approach avatar={{ name: "John", src: "avatar.jpg" }} - | AvatarProps | ComponentClass<AvatarProps, any> | FunctionComponent<AvatarProps> |
contextualItems | — | Optional contextual information displayed below the heading. | ContextualItem[] |
tabs | — | Compose Tabs using a list of NavigationalTabItemProps. | NavigationalTabItemProps[] |