FloatingToolbar
Contextual floating toolbar with action buttons, auto-positioning near selected content, and configurable tool groups
FloatingToolbar Component
Floating action strips for editor tools and high-frequency commands.
Basic Usage
Bottom-position toolbar with common formatting actions.
Last action: No action selected
Implementation Notes
Keep setup minimal so teams can adopt the component quickly.
- - Start with primary user actions only.
- - Keep labels short for compact floating controls.
- - Provide immediate interaction feedback when possible.
Normal Usage
Switch position for side utilities and dense tool panels.
Implementation Notes
This pattern maps to everyday product screens and forms.
- - Right or left position works well for utility actions.
- - Keep icon/text consistency between toolbar locations.
- - Confirm focus order remains keyboard-friendly.
Advanced Usage
Customize toolbar style while preserving semantic action groups.
Implementation Notes
Advanced mode should compose cleanly with app state and callbacks.
- - Keep grouping based on user intent, not visual style.
- - Use consistent callback naming for all toolbar actions.
- - Avoid overloading the floating region with low-value actions.
Real-Life Use Cases
Ideal for editors, whiteboards, and visual composition tools.
Workflow state: No action selected
Implementation Notes
Show how the component fits real workflows, not isolated UI demos.
- - Prioritize actions by frequency and business value.
- - Keep destructive actions out of primary quick bars.
- - Make toolbar behavior predictable across screen sizes.
Related Components
View allApplication bar with scroll effects, elevation changes, and fixed/sticky positioning
Mobile bottom navigation bar with icon labels and active state indicators
Hierarchical navigation trail with separator customization, truncation support, and ARIA navigation landmarks
Enhanced anchor element with variant system, external link indicators, and programmatic navigation integration