Specifications
- Using secondary icon-only buttons at 32x32 is recommended. See Buttons.
- To provide a distinction of the floating toolbar and create the floating effect, a shadow (Level 3) is used. See Shadows & Depth.
- The icon buttons can be aligned as a row (horizontally) or as a column (vertically).
- Vertically aligned toolbars float on top of the content and are usually located on the left or right side of the screen; horizontally aligned toolbars float at the top or bottom of the application window.
- The spacing between separated buttons is 4px.
- Icon buttons which are combined together have only outer corners of the toolbar rounded.
- Toolbar consisting of combined icon buttons can group related controls separated by a divider.
Behaviors
-
All buttons within the toolbar should have the following states:
- Default
- Hover
- Pressed
- Disabled
-
All icon buttons should display a Tooltip on hover.
-
Make sure the controls are placed and grouped in a logical order.
Editorial
- See Tooltips.