Skip to main content
v1.0.0 | View in Storybook

​
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 or secondary surfaces.
  • Rarely used actions: don’t pin them on the Toolbar.
  • Multi-step workflows: use side panels, Dialog, or dedicated pages.
  • Limited space: fewer icon Buttons 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 Buttons and provide Tooltips 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 when space is tight.
  • Maintain 4px gap between toolbar and any Menu the toolbar opens.

​
Often used with

Button, Toggle group, Menu, Separator; Tooltip on icon-only tools; elevation only in canvas-style UIs per 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.

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

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

​
Appearances

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