Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    PageHeader

    The top of a page: location, title, status, description and main actions.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { PageHeader } from '@bigbang/ui';
    Source
    PageHeader.tsx
    Storybook
    PageHeader · Playground

    PageHeader is in the @bigbang/ui package.

    import { Button, PageHeader } from '@bigbang/ui';
    

    <PageHeader
      title="Page title"
      breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Page title' }]}
      actions={<Button>Primary button</Button>}
    />;

    Props

    Section titled “Props”
    titleRequired
    Description
    Page title, rendered as the page's heading. Keep one per page.
    Type
    string
    description
    Description
    One or two sentences under the title that say what the page is for.
    Type
    string
    breadcrumbs
    Description
    Location trail shown above the title. The last item is the current page.
    Type
    readonly BreadcrumbItem[]
    back
    Description
    Link back to the parent page, shown above the title when there are no breadcrumbs, such as on a detail page reached from a list.
    Type
    { href: string; label: string; }
    meta
    Description
    Status next to the title, such as a Badge.
    Type
    ReactNode
    actions
    Description
    Page actions, at most one primary Button and two secondary ones. They wrap under the title on narrow screens.
    Type
    ReactNode
    loading
    Description
    Shows a placeholder instead of the title while the page data loads; the title fades in when it arrives.
    Type
    boolean
    Default
    false
    size
    Description
    Title size: lg for top-level pages, md for nested pages and panels.
    Type
    'md' | 'lg'
    Default
    'lg'
    headingLevel
    Description
    Heading level of the title. Keep 1 unless the header sits inside another page region.
    Type
    1 | 2 | 3
    Default
    1
    render
    Description
    Renders the breadcrumb and back links with the router's link component.
    Type
    ReactElement | ComponentRenderFn<HTMLProps, {}>
    className
    Description
    For layout only: margins and placement.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="page-header": on the root.
    • data-part="title-skeleton": on the placeholder while loading.
    • aria-busy="true": on the root while loading.