Gallery

Design a contextual toolbar for a work app, not a decorative strip of icons. It should support a small set of frequent actions, one grouped control, and at least one action that moves into overflow when space gets tight. Pick a real placement: top bar above a canvas, side rail beside a document, or bottom bar in a mobile editor.

Make the toolbar readable at a glance. Use clear visual hierarchy so the primary action stands out, secondary actions stay quieter, and disabled tools still look intentional. Include icon-only and icon+label variants where that helps the layout, plus a dropdown or split-button for a tool with multiple modes.

Show interaction states for hover, pressed, active, focus, and disabled. If one tool is currently selected, it should remain obvious after the cursor moves away. The toolbar should hold up at different widths without breaking spacing, and keyboard navigation should feel direct, with focus moving in a predictable order.