Toolbar
Not in SB
A toolbar is a thoughtfully designed set of calls to action that empowers users to apply changes and navigate efficiently within our applications. Designed with care to provide quick access to essential functions while maintaining a clean interface, toolbars help users accomplish their tasks with confidence and ease.
When to Use
Use a toolbar when you need to provide users with quick access to frequently used actions or navigation options that are relevant to the current context. Toolbars are perfect for organizing essential controls that users need readily available without cluttering the main content area.
Structure
The toolbar consists of:
- Action buttons that provide clear calls to action
- Navigation controls that help users move through the application
- Container that holds and organizes all toolbar elements
- Flexible layout that adapts to different content needs
Our design system supports two distinct types to meet different use cases and spatial requirements.
There are two types to choose from:
Fixed
To be used full-width at the top of the page.
Freestanding
To be placed statically on a page. Width will adapt to the content.
Guidelines
A toolbar is designed to ensure custom navigation or to apply changes within a page. These controls can have different functionalities depending on your needs.
Our design system supports two types:
- Fixed toolbar - Use full-width at the top of the page for consistent, always-available actions
- Freestanding toolbar - Place statically on a page with width adapting to the content for contextual actions
Choose the type that best serves your users' workflow and the specific context of your application.
Implementation in Figma
- In Figma go to the Assets Panel and search for toolbar
- Drag and drop the component in your frame
- Rename and resize the component if needed
- Choose the variant from the Design Panel