ActionBar

A collection of horizontally aligned IconButtons. The IconButtons can be split into groups by adding a divider. When there is not enough space, IconButtons that don't fit will be added to an overflow menu.

Page navigation navigation

Use an ActionBar to render multiple buttons in a row. Buttons can be split into groups by adding a divider. When there is not enough space, buttons that don't fit will be added to an overflow menu.

React examples

Default

<ActionBar aria-label="Toolbar">
  <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
  <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
  <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
  <ActionBar.IconButton icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
</ActionBar>

<ActionBar aria-label="Toolbar">
  <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
  <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
  <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
  <ActionBar.IconButton icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
</ActionBar>

Small size variant

ActionBar has 3 size variants: large, medium (default), and small.

<ActionBar size="small" aria-label="Toolbar">
  <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
  <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
  <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
  <ActionBar.IconButton icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
</ActionBar>

<ActionBar size="small" aria-label="Toolbar">
  <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
  <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
  <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
  <ActionBar.IconButton icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
</ActionBar>

With dividers

Dividers can be added to visually group related buttons. However, don't use a divider at the beginning or end of the ActionBar.

<ActionBar aria-label="Toolbar">
  <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
  <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
  <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
  <ActionBar.IconButton icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
  <ActionBar.Divider />
  <ActionBar.IconButton icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
  <ActionBar.IconButton icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
</ActionBar>

<ActionBar aria-label="Toolbar">
  <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
  <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
  <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
  <ActionBar.IconButton icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
  <ActionBar.Divider />
  <ActionBar.IconButton icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
  <ActionBar.IconButton icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
</ActionBar>

With text button children

ActionBar button guidelines

<ActionBar aria-label="Toolbar">
  <Button>Edit</Button>
  <Button>Duplicate</Button>
  <Button>Export to CSV</Button>
</ActionBar>

<ActionBar aria-label="Toolbar">
  <Button>Edit</Button>
  <Button>Duplicate</Button>
  <Button>Export to CSV</Button>
</ActionBar>

Demo of overflow behavior

When the buttons don't fit in the available horizontal space, they're moved to an overflow menu. Dividers from the ActionBar are preserved in the overflow menu.

<div
  style={{
    width: '150px',
    border: '1px solid var(--borderColor-default)',
    paddingBlock: 'var(--stack-padding-condensed)',
  }}
>
  <ActionBar aria-label="Toolbar">
    <ActionBar.IconButton icon={HeadingIcon} aria-label="Heading"></ActionBar.IconButton>
    <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
    <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
    <ActionBar.IconButton icon={CodeIcon} aria-label="Insert Code"></ActionBar.IconButton>
    <ActionBar.IconButton icon={LinkIcon} aria-label="Insert Link"></ActionBar.IconButton>
    <ActionBar.Divider />
    <ActionBar.IconButton icon={QuoteIcon} aria-label="Insert Quote"></ActionBar.IconButton>
    <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
    <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
    <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
  </ActionBar>
</div>

<div
  style={{
    width: '150px',
    border: '1px solid var(--borderColor-default)',
    paddingBlock: 'var(--stack-padding-condensed)',
  }}
>
  <ActionBar aria-label="Toolbar">
    <ActionBar.IconButton icon={HeadingIcon} aria-label="Heading"></ActionBar.IconButton>
    <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
    <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
    <ActionBar.IconButton icon={CodeIcon} aria-label="Insert Code"></ActionBar.IconButton>
    <ActionBar.IconButton icon={LinkIcon} aria-label="Insert Link"></ActionBar.IconButton>
    <ActionBar.Divider />
    <ActionBar.IconButton icon={QuoteIcon} aria-label="Insert Quote"></ActionBar.IconButton>
    <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
    <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
    <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
  </ActionBar>
</div>

More code examples

See the ActionBar Storybook stories

Props

Loading data for actionbar...