ActionBar

Overview

The ActionBar component provides a consistent way to display a set of action buttons at the bottom of a page or section. It supports up to three actions and ensures visual consistency across the platform.

Use to provide quick and consistent access to key actions at the bottom of a page.

Implementation

To use ActionBar import the component from the package:

Code example

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

Edit the code below to see your changes live!

<ActionBar
  actions={[
    {
      text: 'Primary',
      variant: 'primary',
    },
    {
      text: 'Secondary',
      variant: 'secondary',
    },
  ]}
/>

Props

Prop name
Type
Default
Description
actions *ActionButton[]

An array of actions to display in the action bar. Supports up to three actions.

Props ending with * are required

Do's and Don'ts

Do
Use to provide quick and consistent access to key actions.
Limit the number of actions to three, prioritizing the most important ones.
Ensure that only one primary action is included to guide user focus.
Don't
Don't use for non-critical actions.