Navigation
input
Floating
Display

Icon Button

Lets the user take an action (this could change the state of the current page or navigate the user to a different page)

Code component(s): IconButton

Icon Buttons are used to signal to the user that they can take an action. Use Button if you need to include a visible label.

Anatomy

Options

Icon

Use an icon from the Icon Library or use a custom icon. If you use a custom icon, it must be reducible to a single SVG path element with a single color.

Variant

Choose between Primary (default), Secondary, or Tertiary

Disabled

In some circumstances you may want to temporarily prevent the user from taking an action, yet still show them that the action may be valid in a different state

Guidelines

Stack buttons horizontally

When you provide multiple related actions, stack them horizontally with 0 px of space between them

Provide a label for screen readers

As with alt text for images, you must always provide a label for screen readers to read aloud when they encounter an Icon Button

Related components

We'll soon be deprecating this site. For the latest version of our documentation, go to our Storybook site!