yarn add @twilio-paste/page-header - or - yarn add @twilio-paste/core
import {
PageHeader,
PageHeaderActions,
PageHeaderDetails,
PageHeaderHeading,
PageHeaderInPageNavigation,
PageHeaderKeyword,
PageHeaderMeta,
PageHeaderParagraph,
PageHeaderPrefix,
PageHeaderSetting,
PageHeaderSeparator,
} from '@twilio-paste/core/page-header';
const MyPageHeader = () => {
return (
<PageHeader size="default">
<PageHeaderSetting>
<Breadcrumb>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb</BreadcrumbItem>
</Breadcrumb>
</PageHeaderSetting>
<PageHeaderDetails>
<PageHeaderKeyword>Wizard title</PageHeaderKeyword>
<PageHeaderPrefix>
<Avatar size="sizeIcon90" name="Avatar Name" />
</PageHeaderPrefix>
<PageHeaderHeading>Page title</PageHeaderHeading>
<PageHeaderActions>
<ButtonGroup>
<Button variant="secondary">Action</Button>
<Button variant="secondary">Action</Button>
</ButtonGroup>
</PageHeaderActions>
<PageHeaderMeta>
<Badge variant="success" as="span">
Badge
</Badge>
Meta
<Anchor href="#">Meta</Anchor>
</PageHeaderMeta>
<PageHeaderParagraph>Paragraph text</PageHeaderParagraph>
</PageHeaderDetails>
<PageHeaderInPageNavigation>
<InPageNavigation aria-label="get started">
<InPageNavigationItem href="#" currentPage>
Label
</InPageNavigationItem>
<InPageNavigationItem href="#">Label</InPageNavigationItem>
<InPageNavigationItem href="#">Label</InPageNavigationItem>
</InPageNavigation>
</PageHeaderInPageNavigation>
</PageHeader>
);
};
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGE_HEADER'
size
Size of the Page Header
- Type
"default" | "compact"- Default
'default'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGE_HEADER_SETTING'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGE_HEADER_DETAILS'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGE_HEADER_KEYWORD'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGE_HEADER_PREFIX'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
as
The HTML element to render.
- Type
any
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGE_HEADER_HEADING'
variant
Style variant to apply to the heading, affects the visual appearance of the heading.
- Type
any- Default
'heading10' for default size, 'heading20' for compact size
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGE_HEADER_PARAGRAPH'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGE_HEADER_META'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGE_HEADER_ACTIONS'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGE_HEADER_IN_PAGE_NAVIGATION'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'PAGE_HEADER_SEPARATOR'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.