Introduction
Icon buttons are icon-only buttons, without an additional label, and are interactive components that can be activated to trigger specific actions. Their purpose is to guide users on how to proceed and offer them a means to engage with the page, mostly used as secondary actions or as elements in toolbars.
- Icon Buttons can be used where space is limited
- Icon Buttons can be used along side a regular button, as a means to show a secondary action or to add a flyout with additional actions
- Icon Buttons can either be in a button group with other buttons, in a icon-only button group or stand-alone.
Usage
Use icon buttons for secondary or tertiary actions in button groups.
Always use text buttons for any primary action in groups, except for when all buttons are icon-only buttons.
Use buttons in patterns such as modals, dialogs and forms to accurately communicate the available actions to users.
Icon buttons can not be used instead of regular buttons in places where the action needs to be properly communicated to the user.
Icon buttons can be grouped together. To avoid cognitive overload, use up to four icon buttons in a group.
Too many icon buttons in a group can cause cognitive overload and can lead to confusion. Limit your icon buttons to four.
Also known as
Condensed Button, Glyph Button, Icon-only Button