Use the icon-btn class (for buttons) or the icon-link class (for links) and any of the available icons for a borderless, actionable icon style.

To remove the background colour and hover states, apply the icon-btn--transparent modifier. This is typically needed if the icon button is placed on a non-default background colour or if the icon has a colour fill (as in the case below).

Badged Icon Button

An icon button can be badged using the badge module.

The button or anchor element requires an additional icon-btn--badged or icon-link--badged modifier, respectively.

Primary Icon Button

Use the primary modifier to create a primary icon button variant.

Secondary Icon Button

Use the secondary modifier to create a secondary icon button variant.

Tertiary Icon Button

Use the tertiary modifier to create a tertiary icon button variant.

Using with a Progress Spinner

You may use a progress spinner inside the icon button.

Using a Link

You may use an <a> to create a link icon button as well.