Anatomy
- Container: The background surface that holds all Toolbar items.
- Content slot: The primary flexible container of the Toolbar that displays all the information like buttons, iconbuttons, inputs or texts.
Usage Guidelines
When to use this component
Use a Toolbar when users need quick access to multiple contextual actions.
- Frequent actions: Ideal for placing commonly used actions or controls in a consistent, easy-to-reach location.
- Contextual tasks and actions: Best when users need quick access to functions related to the current view or content.
- Action grouping: Use to organize multiple related actions into a single, predictable container.
When not to use this component
- Single primary action: Avoid when only one main action is needed, use a button instead.
- Low relevance actions: Do not include actions that are rarely used or unrelated to the current context.
- Action overload: Avoid packing too many items; this reduces clarity and increases cognitive load.
- Navigation replacement: Do not use a toolbar as a substitute for primary navigation components.
Best Practices
Ensure the toolbar appears in a predictable and easy access location across screens.
Don’t change placement between screens. Inconsistent positioning makes actions harder to find and learn.
Choose icons with strong affordance; include labels when meaning may not be obvious.
Don’t rely on ambiguous icons. Unclear visuals reduce usability and increase errors.
Order actions from most to least important based on user needs and context.
Don’t treat all actions equally. Lack of hierarchy leads to confusion and slower decision-making.
Maintain comfortable spacing and tappable areas for all actions.
Don't mix unrelated actions in a single toolbar. Every item should relate to the same task or content context.
Keep the number of actions in a toolbar focused and manageable. A toolbar with too many items becomes harder to scan and use.
Don’t overcrowd the toolbar. Too many actions create cognitive overload and reduce effectiveness.
Respect safe areas, screen sizes, and platform-specific behaviors.
General Component Behaviors
Placement
The toolbar is always located at the bottom of the pages for thumb-friendly interaction.
Docked toolbar
The Docked variant sits flush against the bottom edge with no top or bottom margins relative to adjacent content. It respects the safe area insets of each operating system (e.g., the home indicator region on iOS), ensuring controls remain reachable and unobstructed.
Floating toolbar
The Floating variant maintains a space-s (16px) margin above and below it relative to other elements, keeping it visually separated from the content it sits over.
Width
The toolbar behaves differently in terms of width depending on its variant.
Docked toolbar
The Docked toolbar has no minimum width and always stretches to fill the maximum screen width. It acts as a fixed-width bar anchored to the edges of the viewport.
Floating toolbar
The Floating toolbar's width is determined by its content. It has a minimum width of 44px for its slot area. Its width will increase as elements are added within its content area (slot). Its maximum width will be determined by the screen size, maintaining a 16px margin on both sides.
Content orientation
The content is always be oriented horizontally and will remains on a single line. The toolbar does not wrap its content to a second row or adds a scrollbar for having more elements.
Docked toolbar
The spacing between elements is adjusted automatically so that they span the full width of the content slot. When items fill the available width, a small gap of 4px or 8px is maintained between them.
Floating toolbar
The spacing between elements uses a consistent gap space-xxs (4px) by default. This gap can be customized to suit other scenarios like creating hierarchical groups of elements.
Variants
Floating
Use the Floating variant when the toolbar provides contextual actions that are secondary to the main content and should feel lightweight. The Floating toolbar appears elevated above the interface with rounded, pill-shaped edges and a subtle shadow, making it visually distinct from the content beneath it.
Docked
Use the Docked variant when the toolbar is a persistent, structural part of the screen layout, for example, a search bar with actions that anchors to the bottom of a list view. The Docked toolbar is separated from the content above by a subtle top border.
Layout and composition
The Toolbar defines how content is structured, grouped, and prioritized within a constrained horizontal space.
Allowed Elements
Toolbars can contain Icon buttons, Buttons, Inputs (search, message, filters), Text (labels, counters, …) and Dividers (for grouping elements)
Composition patterns
Action based: Mainly focused on contextual or quick actions. It can have icon buttons or buttons.
Input-based: Mainly thought for direct interactions like for example a chat. It can combine inputs with other components like texts, buttons or icon buttons.
Grouped actions: Indicated to separate different but related informations or elements.
Grouping & Hierarchy
Group related actions: Same task, same meaning or frequently used together.
Use visual grouping: Spacing (default), Divider (when needed) or container grouping (tight relationships).
Content Guidelines
- Prefer universally recognizable icons for toolbar actions. If an icon's meaning is ambiguous, pair it with a tooltip or consider whether the action belongs in a toolbar at all.
- When using a text input inside the toolbar (common in the Docked variant), use concise placeholder text that clearly communicates the input's purpose, such as "Search visits" rather than "Type here."
- Limit toolbar actions to what the user needs most frequently in the current context. Less common actions can live in an overflow menu or a different part of the interface. Keep to 3-5 actions.
For further information, see the Content Styleguide.