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
In progress | Storybook link coming soonWhen 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.