Icon Button
Edit pageLast modified: 13 February 2025Implementation: 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.

A drop-down button has an arrow icon in the bottom right corner and opens a menu with actions or checkboxes.

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.

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.

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.
Thanks for your feedback!