ComponentsNavigation
Toolbar
A horizontal row of actions and controls for the content beside it, such as an editor or a table. Use a toolbar for page-level actions and keep the app bar for the application.
Editor toolbar
Groups of icon buttons separated by vertical dividers, with a spacer pushing the last group to the end. Icon-only buttons carry accessible names and tooltips.
Choose an action.
Dense and gutters
Dense lowers the bar from 64 to 48 pixels. Gutters, on by default, adds horizontal padding; turn it off when the toolbar sits inside an already padded container.
Dense false · Gutters true
Dense false · Gutters false
Dense true · Gutters true
Dense true · Gutters false
Wrapping content
By default a toolbar keeps everything on one line. WrapContent lets the items flow onto a second line when the bar is too narrow; drag the narrow frame wider to compare.
WrapContent false
WrapContent true
Above a table
A realistic toolbar for a list: a title, a search field, a filter menu and the primary action.
Showing all samples.