COMPONENTS
Toolbar
Toolbar is a container that displays tools that can control another component.
Toolbar is container with responsive logic built-in that holds tools. Toolbar has advanced configurations available in a settings modal.
- Toolbar Container
- Widget Tool
- Shortcut Button
Toolbar is built to have adaptive behavior for all tools displayed. At smaller screen sizes, larger components, called widgets, adapt to icon-only buttons, called shortcuts.
All tools within the toolbar can flow into an overflow menu when space does not allow for all tools to be displayed in the horizontal space available.
Toolbar layout settings allow the end user to control which tools are visible in the toolbar and in which order they appear.
Toolbar can be displayed in three sizes — large, medium, and small. The size defines the size of inner components that will be shown. A small toolbar will pull in small sized buttons.
Density controls the amount of padding around the inner components of the toolbar and can be set to one of three options — standard, compact and extra-compact. Density is paired with size property to create the final display height of the toolbar.
Contents