2.5 KiB
Icon Button
UI guidelines on using icon buttons.
Implementation: ActionButton
A toolbar icon button is an icon that appears on a toolbar.
Types
There are three types of toolbar icon buttons:
An action button triggers an action immediately on clicking it, e.g., the Open button.
A toggle button switches the state on clicking it, e.g., a button to show and hide warnings in the output tree.
{width=143}
A drop-down button has an arrow icon in the bottom right corner and opens a menu with actions or checkboxes.
{width=284}
When to use
Follow the rules for toolbar.
How to use
Provide a recognizable icon. Use an existing icon or create a new one using icon guidelines.
Provide a short and descriptive name for a toolbar icon button. Show a tooltip with the button name on mouse hover. Include a shortcut if there is one. See Context help for details.
{width=163}
Highlight a toolbar icon button on mouse hover. Highlight a toolbar icon button with a brighter color on clicking it.
-
Toggle buttons remain highlighted when they are in the switched on mode. Toggled on buttons do not change color on hover.
-
Drop-down buttons remain highlighted while the menu is opened.
{width=183}
If an action is not available in this context, disable the corresponding button and gray out the icon. For toolbar drop-down buttons, disable the arrow icon as well. Do not highlight a disabled icon on mouse hover.
Sizes and placement
Icons size is 16x16px, icon selection is 22x22px.
For guidelines on the space between toolbar icon buttons see Toolbar.