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: 'New', variant: 'success' }}
  description="This is a description of the page content."
  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

An icon to display to the left of the title.

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.
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.