Components/Toolbar

The toolbar enables the user to change the UI or trigger an action. For example, the user can change views, manipulate data or objects, navigate to another page, perform generic actions, and so on. This component is usually paired with buttons, which are always right-aligned.

**Toolbar actions can be as follows:** - They can be independent of the current selection and not related to a specific item or object. - They can be specific to the current object (user selects one item). - They can apply to a set of items (user selects two or more items). - They can control the settings for parts of the UI content. For example, an action can affect all items in a **Table**. **Toolbar actions can be as follows:** - They can be independent of the current selection and not related to a specific item or object. - They can be specific to the current object (user selects one item). - They can apply to a set of items (user selects two or more items). - They can control the settings for parts of the UI content. For example, an action can affect all items in a **Table**.

The primary toolbar displays several actions separated by icon buttons. It is displayed in cozy mode, which is ideal for mobile and small tablet screens.

The Overflow behaviour of the toolbar can place elements in an overflow state when there is not enough space to display all of them. The overflowing elements are represented by a button and upon interacting with the button a popover with a list of elements is shown. The vertical spacing between the elements is achieved by additional modifier classes: - \

Toolbar can be styled in various ways depending on the use case. | Types | Modifier class | Description | | :-------- | :------------- | :--------------- | | Solid | \

Separators should be used to visually separate items from each other. To display separators in toolbars, add the \

Toolbars are typically used for left/right alignment; however, they can be displayed in any way with the \