UI components · Layout containers
Toolbar
Also called: Action bar, Button bar, Editor toolbar, Button toolbar
A compact row of buttons and icons placed above a block of content, grouping the common actions for that content in one place.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a toolbar above the table. On the left, put a primary "New" button and regular "Import" and "Export" buttons. On the right, put three icon buttons, Refresh, Column settings, and Fullscreen, each with a tooltip on hover. When table rows are checked, switch the left side to "3 selected" and a "Delete selected" button. Make all buttons 32px tall, and separate groups with spacing.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Toolbar is what you need.
Use Toolbar when
- Above a table or list, you need one place for actions on that data, like New, Import, and Export
- A rich text, image, or other editor needs a row of formatting or editing tools
- After checking several records, you need to show bulk action buttons
Pick something else when
Moving between pages
It mainly holds search boxes and filters
Use insteadFilter BarThere's only one action; just use a single button
Use insteadButton
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
A dozen buttons laid out in one row with no groups and no priority, squeezed onto two lines on narrow screens
- 02
All icon buttons with no tooltips, so users can't tell what each icon means
- 03
Mixing filters, nav links, and action buttons in the same toolbar
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A row of buttons, icon buttons, and vertical group separators, often split into main actions on the left and secondary actions on the right. Actions that don't fit go into a "More" menu.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A toolbar is a row of buttons packed together, usually right above a block of content: "Bold, Italic, List, Insert image" at the top of a rich text editor, "New, Import, Export, Refresh" above a table, or "Crop, Rotate, Undo" in an image editor. Related buttons are grouped with vertical lines between them. Common ones are shown directly, and less common ones go into a "More" dropdown. For accessibility, the toolbar container should have role="toolbar", and the arrow keys should move focus between its buttons.
How it differs from a Navbar: a navbar moves between pages, while a toolbar only acts on the content it sits above. How it differs from a Filter Bar: a filter bar holds query conditions like search boxes and dropdowns to narrow down the data, while a toolbar holds action buttons. Table pages often stack the two: filter bar on top, toolbar below.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-toolbar- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
[role="toolbar"].btn-toolbar.ql-toolbar.tox-toolbar.ck-toolbar.w-e-toolbar.ant-pro-table-list-toolbar[class*="MuiToolbar-root"]:not([class*="MuiAppBar-root"] *)
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026