Skip to main content
v1.0.0 | View in Storybook

​
When to use

  • Data in a list, Table or Card must be selected before applying actions such as “Run parsing,” “Add to sequence,” or “Remove from plan”.
Example: Showing Delete, Duplicate, and Export actions after a user selects one or more rows in a Data grid.
  • You need to conserve table space; an Action toolbar can be used to house common table actions like Delete, Copy, and Duplicate instead of displaying them in the Table or persistent Page toolbar.
Example: Moving row actions out of individual table columns into a floating toolbar that appears on selection.
  • Item(s) must be selected before continuing on with the workflow and there are many paths a user can take.
Example: Offering several next-step actions—such as “Add to plan,” “Assign owner,” or “Archive”—after multi-select in a list view.

​
When to use something else

  • Use a Toolbar (including page-level toolbars) when item(s) do not need to be selected before applying an action.

​
Dos and don’ts

  • Do center align the Action toolbar within the container or page it applies to.
  • Do keep it contextual and only include actions relevant to the current view or selection.
  • Don’t make the Action toolbar draggable or position it anywhere but the bottom area.
  • Don’t clutter the toolbar with too many actions. Use progressive disclosure with menus if needed.

​
Behavior

  • The toolbar does not appear until the user has made a selection (for example in a Data grid or list).
  • It transitions in from the bottom of the page or section and stays fixed until the user clears selection, completes the action, or navigates away. It is not draggable.
  • If the page does not reload when an action runs, the toolbar transitions downward off screen while the action completes.

​
Often used with

Data grid or list multi-select, Checkbox row selection, Button (including icon-only), Menu for overflow actions, Tooltip on icon-only actions.

​
Visual examples

The examples below are interactive and follow the doc site’s theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

​
Selection and actions

Use the Action toolbar when users select one or more items in a list or data grid and need contextual actions such as delete, duplicate, or export. The toolbar appears at the bottom of the view and shows the selection count alongside available actions.

​
With primary action

Include a primary action Button in the Action toolbar when one action is the recommended next step for the current selection—for example, “Add to plan” or “Run parsing.” Keep supporting actions as secondary or icon-only buttons to maintain clear hierarchy.

​
Custom label / many actions

Use a custom selection label and overflow actions when the default count label is not descriptive enough or when more actions are needed than fit comfortably in the toolbar. Group less common actions in a menu to avoid cluttering the bar.

​
Accessibility

Ensure the Action toolbar announces the selection count and action labels to screen readers, and support keyboard navigation between toolbar actions without trapping focus in the underlying content.
Last modified on September 16, 2026