Anatomy
The Toolbar consists of four primary elements that work together to group a set of controls.
- Individual tools
- Button
- Select
- Additional tools overflow menu
Options
The Toolbar supports the following configurations to accommodate various control grouping scenarios.
Direction
| Direction | Description |
|---|
| Horizontal | The default behavior, which lays out tools horizontally. |
| Vertical | Lays out tools vertically. |
Behavior
The Toolbar responds to space constraints with wrapping and collapse behaviors while maintaining consistent control grouping.
Wrapping
| Overflow Handling | Description |
|---|
| Wrap | The default behavior, which wraps filters on resize. |
| Collapse | Collapses filters on resize behind an overflow menu. |
Collapse Overflow
Overflow collapses in the same order as the DOM. The topmost item in the overflow menu is the first to reappear in the DOM when resizing to a wider width.
Usage Guidelines
Use the Toolbar when providing contextual actions to a user on the items below it.
When to Use
Use Toolbar in multiple places such as WYSIWYGs, table quick actions, page header actions, or the Toolbelt experience.
Use Toolbar to provide contextual actions to users on the items below it, such as an emoji reaction to a comment or a font-styling option in a rich text editor.
When Not to Use
Avoid using Toolbar when there are many actions users can take on the items below. Use Toolbar to provide quick, contextual, and relevant actions.
Avoid using Toolbar when you need to batch filter API calls based on user actions.
Avoid using Toolbar for complex filters.
Content
Content within the Toolbar should provide clear, contextual actions through grouped controls.
Keyboard Interaction
Users can navigate the Toolbar using standard keyboard controls.
| Key | Interaction |
|---|
| Tab and Shift + Tab | Move focus into and out of the toolbar |
| Left Arrow / Up Arrow | Moves focus to the previous control. This wraps to last control if current control is the first. Note that this is on DOM level so direction doesn’t matter. |
| Right Arrow/ Down Arrow | Moves focus to the next control. This wraps to first control if current control is the last. Note that this is on DOM level so direction doesn’t matter. |
| Home | Moves focus to the first control |
| End | Moves focus to the last control |
Accessibility
Accessibility
Keyboard interaction and aria guideline to follow WCAG Toolbar pattern.
Since some ScreenReaders do not read disabled elements properly, we will enable focus for disabled controls using disabled as prop but internal assigning that to aria-disabled with style and function to block user interaction.
For more guidance on form field labels and context, see input field context association best practices. Last modified on January 23, 2026
