Skip to main contentSkip to filter inputPrimer

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

React
ready
Storybook|Source|Usage
Rails
ready
Docs|Lookbook|Source

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

Small size variant

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

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.

With text button children

ActionBar button guidelines

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.

More code examples

See the ActionBar Storybook stories

Props

ActionBar

NameDefaultDescription
aria-label
string

When provided, a label is added to the action bar

aria-labelledby
string

When provided, uses the element with that ID as the accessible name for the ActionBar

children
ReactNode

Buttons in the action bar

size
'medium'
'small' | 'large' | 'medium'

Size of the action bar

flush
false
boolean

Allows ActionBar to be flush with the container

className
string

Custom className

gap
'condensed'
'none' | 'condensed'

Horizontal gap scale between items (restricted to none or condensed).

ActionBar.IconButton

NameDefaultDescription
children Required
React.ReactNode

This will be the Button description.

icon
Component

Provide an octicon. It will be placed in the center of the button

aria-label
string

Use an aria label to describe the functionality of the button. Please refer to our guidance on alt text for tips on writing good alternative text.

disabled
boolean

Provides a disabled state for the button. The button will remain focusable, and have aria-disabled applied.

See IconButton for more prop options

ActionBar.Divider

No props documented

ActionBar.Group

NameDefaultDescription
children
React.ReactNode

ActionBar.Menu

NameDefaultDescription
aria-label Required
string

Accessible label for the menu button.

icon Required
Component

Icon for the menu button.

items Required
ActionBarMenuItemProps[]

Array of menu items to render in the menu. Each item can be an action, group, or divider.

overflowIcon
Component | 'none'

Icon displayed when the menu item is within the overflow menu. If 'none' is provided, no icon will be shown in the overflow menu.