Back to components

Icon Button

An icon button is mostly used for quick actions.

Table of Contents

Edit this section, Opens in new window

Overview

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways.

Edit this section, Opens in new window

Usage

The Icon Button is used when you want small button controls.

Sizing

The Icon Button comes in 4 sizes.

Smaller size
Small size
Default size
Large size
Use sparingly!
Edit this section, Opens in new window

Behaviours

Interactions

Active
Hovered
Focused
Hover + focus
Active with an SVG
Hovered with an SVG
Focused with an SVG
Hover + focus with an SVG

Modifiers

Disabled
Edit this section, Opens in new window
Contact us, Opens in new window