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
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
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
| Name | Required | Description |
|---|---|---|
aria-label | stringWhen provided, a label is added to the action bar | |
aria-labelledby | stringWhen provided, uses the element with that ID as the accessible name for the ActionBar | |
children | ReactNodeButtons in the action bar | |
size | 'small' | 'large' | 'medium'Size of the action bar | |
flush | booleanAllows ActionBar to be flush with the container | |
className | stringCustom className |
ActionBar.IconButton
| Name | Required | Description |
|---|---|---|
children | Required | React.ReactNodeThis will be the Button description. |
icon | ComponentProvide an octicon. It will be placed in the center of the button | |
aria-label | stringUse an aria label to describe the functionality of the button. Please refer to [our guidance on alt text](https://primer.style/guides/accessibility/alternative-text-for-images) for tips on writing good alternative text. | |
disabled | booleanProvides a disabled state for the button. The button will remain focusable, and have `aria-disabled` applied. |
ActionBar.Divider
| Name | Required | Description |
|---|