> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Toolbar

> Toolbars give users quick access to common actions, tools, or commands. Think of them like a row of Buttons or icons that let you do things without digging through settings or Menus. They are placed contextually near the element they affect or sometimes only appear when an element is selected.

## Toolbar

<Badge color="orange">In progress</Badge> | *Storybook link coming soon*

### When to use

* Frequent actions: When users need quick access to common or repetitive actions (e.g., save, edit, delete).
* Efficiency-focused apps: Ideal in productivity apps (editors, collaboration tools) where speed and convenience matter.
* Contextual commands: Toolbars work well when they show tools relevant to the current task (e.g., formatting options in a text editor when text is selected or canvas-based actions in a floating toolbar).

### When to use something else

* Too many actions: overflow into [Menu](/aura-design-system/primitives/menu) or secondary surfaces.
* Rarely used actions: don’t pin them on the [Toolbar](/aura-design-system/primitives/toolbar).
* Multi-step workflows: use side panels, [Dialog](/aura-design-system/primitives/dialog), or dedicated pages.
* Limited space: fewer icon [Button](/aura-design-system/primitives/button)s or alternative patterns (bottom sheet, FAB)—implementation-specific.

### Dos and don'ts

* Do prioritize key actions; place the most frequently used/important actions first.
* Do hide less frequently or sub-related actions. For example, an action item that lets you change sticky note colors should be hidden under one trigger.
* Do use icon-only [Button](/aura-design-system/primitives/button)s and provide [Tooltip](/aura-design-system/primitives/tooltip)s on hover (and accessible names for keyboard/AT).
* Don't group unrelated actions in the same section. Instead, group by relation or order in terms of frequency.

### Styling

Toolbars can be elevated inside canvas-based applications to help them “float” and stand out from the other page content. Otherwise, Toolbars used inline or within the page content should not be elevated.

### Placement & alignment

Orientation:
Toolbars can either be displayed horizontally or vertically. While the orientation depends on page context and other surrounding elements; consider potential Menus that will be triggered by the Toolbar Buttons and place the Toolbar accordingly.

Menu placement:
If a Toolbar Button triggers a Menu, there should be a 4px gap between the Toolbar and the Menu. Make sure the Menu is positioned in a way that does not obstruct content below or fall outside the viewport and is aligned top or side with the Button frame.

For horizontal Toolbars, the Menu should be above or below the Toolbar depending on its placement within the UI. For vertical Toolbars, the Menu should be left or right of the Toolbar depending on its placement within the UI.

### Behavior

* Actions run on activation; overflow collapses extras into [Menu](/aura-design-system/primitives/menu) when space is tight.
* Maintain 4px gap between toolbar and any [Menu](/aura-design-system/primitives/menu) the toolbar opens.

### Often used with

* [Button](/aura-design-system/primitives/button), [Toggle group](/aura-design-system/primitives/toggle-group), [Menu](/aura-design-system/primitives/menu), [Separator](/aura-design-system/primitives/separator); [Tooltip](/aura-design-system/primitives/tooltip) on icon-only tools; elevation only in canvas-style UIs per [Styling](#styling).