> ## 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.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# 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.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-toolbar--docs)

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-toolbar--default" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-toolbar--default&viewMode=story&globals=theme:light" title="Toolbar default story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

## 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](/cdf/aura/primitives/dropdown-menu) or secondary surfaces.
* Rarely used actions: don't pin them on the [Toolbar](/cdf/aura/primitives/toolbar).
* Multi-step workflows: use side panels, [Dialog](/cdf/aura/primitives/dialog), or dedicated pages.
* Limited space: fewer icon [Button](/cdf/aura/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](/cdf/aura/primitives/button)s and provide [Tooltip](/cdf/aura/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](/cdf/aura/primitives/dropdown-menu) when space is tight.
* Maintain 4px gap between toolbar and any [Menu](/cdf/aura/primitives/dropdown-menu) the toolbar opens.

## Often used with

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

## Visual examples

The examples below are interactive and follow the doc site's theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

### Title

Add a title to the toolbar when users need context about what the actions apply to—for example, the selected object name or the current editing mode.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-toolbar--title" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-toolbar--title&viewMode=story&globals=theme:light" title="Toolbar title story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Non floating

Use a non-floating toolbar when actions are part of the page layout—for example, inline formatting controls above an editor or a persistent action row in a form.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-toolbar--non-floating" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-toolbar--non-floating&viewMode=story&globals=theme:light" title="Toolbar non floating story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Vertical

Use a vertical toolbar when horizontal space is limited—for example, along the edge of a canvas or in a narrow side panel where actions stack naturally.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-toolbar--vertical" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-toolbar--vertical&viewMode=story&globals=theme:light" title="Toolbar vertical story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Appearances

Choose toolbar appearance based on context—elevated for canvas-style floating toolbars, and flat for inline toolbars that sit within page content.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-toolbar--appearances" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-toolbar--appearances&viewMode=story&globals=theme:light" title="Toolbar appearances story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>