COMPONENTS

Toolbar

Toolbar is a container that displays tools that can control another component.

toolbar-intro

Toolbar is container with responsive logic built-in that holds tools. Toolbar has advanced configurations available in a settings modal.

toolbar-anatomy
  1. Toolbar Container
  2. Widget Tool
  3. Shortcut Button

Toolbar is currently available to pair with with Grid or Charts.

toolbar-variations

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.

toolbar-adaptive-display

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-overflow-menu

Toolbar layout settings allow the end user to control which tools are visible in the toolbar and in which order they appear.

toolbar layout

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.

toolbar-sizes

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.

toolbar-density