Icon Button

Icon buttons help users take supplementary actions with a single tap.

Anatomy

Item	Name	Description	Component
1	Container	HTML button element.	-
2	Icon	Positioned in the centre of the container Note: If using an icon button, always supply an icon.	-

Specifications & Properties

Variants

Icon buttons display icons, instead of text. The icons, however, must be monospaced inside the button. Icon buttons are used primarily in management bars. The button variation type can be primary, secondary, or borderless.

Item	Variant	Usage
1	Primary	Icon primary buttons should only appear once per screen (not including the AppBar, modal dialog, or side panel).
2	Secondary	For secondary actions on each page. Secondary Icon buttons can only be used in conjunction with a primary button.
3	Tertiary default variant	For less prominent, and sometimes independent, actions. Icon tertiary buttons can be used in isolation or paired with a primary button when there are multiple calls to action. Tertiary buttons can also be used for sub-tasks on a page where a primary icon button for the main and final action is present.
4	Ghost	For the least pronounced actions; often used in conjunction with an icon primary button. In a situation such as a progress flow, a ghost button may be paired with a primary and secondary button set, where the primary button is for forward action, the secondary button is for a step back, and the ghost button is to cancel.
5	Danger	For actions that could have destructive effects on the user’s data, e.g. delete or remove.

The Icon Button follow the same hierarchy as the Text Button

Sizes

Icon buttons are available in 3 fixed sizes. The icon button content always has a fixed size of 16px:

small (32px)
Small should only be used in places where the UI is very dense.

medium (40px).
Default used icon button.

large (48px)

x-large (56px)
Extra Large is for GX and mobile products only.

Spacing

Spacing visualized on the default icon button is size M

States

States showcased on the default variants is tertiary, size M

Item	State	Description
1	Default	The default style before the user interacts with the button.
2	Hover	The button changes style to let the user know it’s interactive.
3	Active	The button changes style to let the user know they’ve interacted with it.
4	Disabled	Communicates that a button exists, but isn’t available in that scenario. When the user hovers over a button in a disabled state, the cursor shows as ‘not allowed. Disabled buttons maintain layout consistency and communicate that a button may become available if another condition is met.
5	Loading	Communicates that an action will become available when loading is complete, or that an action is being completed. The background colour of the button changes and a loading indicator is displayed.