Header

Overview

Header is a layout component that provides a standard structure for page titles, descriptions, icons, badges, and actions.

When to use:

  • To display a title and related actions at the top of a page.
  • To provide context and quick actions for users.

Implementation

To use Header import the component from the package:

Code example

import { Header } from '@bigcommerce/big-design-patterns';

Edit the code below to see your changes live!

<Header
  actions={[
    {
      text: 'Main',
      variant: 'primary',
      iconLeft: <AddIcon />,
    },
    {
      items: [
        { content: 'Option 1', onItemClick: (item) => item },
        { content: 'Option 2', onItemClick: (item) => item },
      ],
      toggle: {
        text: 'Secondary',
        variant: 'secondary',
        iconRight: <ArrowDropDownIcon />,
      },
    },
    {
      text: 'Tertiary',
      variant: 'subtle',
    },
  ]}
  backLink={{
    text: 'Back to Dashboard',
    href: '/dashboard',
  }}
  badge={{ label: 'Active', variant: 'success' }}
  description="This is a description of the page content."
  lozenge={{ variant: 'beta', label: 'Beta' }}
  title="Page Title"
/>

Props

Prop name
Type
Default
Description
title *string

The main title of the header.

actionsArray<ActionButton | ActionDropdown>

An array of actions to display in the header. Can include buttons or dropdowns.

backLinkBackLink

Configuration for a back link displayed at the top left of the header.

badgeBadgeProps

Props to display a badge next to the title.

descriptionstring | Text

A description to display under the title.

iconReactNode

Prop reserved for an Icon to display to the left of the title.

lozengeLozengeProps

Prop reserved for a Lozenge to display the lifecycle version of the feature.

Props ending with * are required

Do's and Don'ts

Do
Use the header to provide a clear overview of the page’s purpose.
Limit the number of actions to three.
Utilize the back link option for easy navigation.
Use badges to indicate system status.
Use lozenges to indicate feature lifecycle.
Don't
Don’t overload the header with too many actions or content.
Don’t use more than one primary action button.
Avoid unrelated or non-contextual content in the header.
Don’t use badges to showcase feature lifecycle.
Don’t use lozenges to showcase system status.