Icon Button

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.