Skip to content

IconButton

IconButton is an accessible solution for turning an Icon without a visible text label into an interactive element.
Figma logo

IconButton provides an accessible solution for an icon to function as a button without a label. A regular Button with text and an Icon should be used for most cases.

IconButton is most often used when space is limited, like on mobile devices, a group of IconButtons surrounded by other content, and/or triggering a Menu.

At this time we suggest that IconButton should be preserved for specific interactions and should therefore not be used when linking to another page.

Styled with a transparent background and a salt-700 icon; background only appears on hover.

The filled variant adds a background color, making the round shape of the button always visible. The warning-500 background color is added in this example for illustrative purposes.

IconButtons can be aligned in a number of ways, but here is one option showing a toggle for a Menu.

IconButton used to open a Menu
IconButton is an ideal option for reducing the amount of actions on the surface and can be useful for saving space.
Showing the outer edge of an IconButton aligned with the edge of a Button
Align the outer element background rather than optically aligning the icon.
Showing a tooltip with a concise title
Always include a brief, concise title describing an IconButton’s action.
Showing IconButton modified into primary and secondary button colors
Avoid using IconButton for primary or secondary action buttons. These styles are reserved for critical actions, and must be easily discoverable by the user.
React props
NameTypeDefaultDescription
children  ReactNodeThe content of the IconButton.
color  primaryneutralneutralSpecifies the background color of the button; only relevant with variant="filled".
title  RequiredstringAccessible label for the button. Visually displayed as a tooltip.
variant  filledghostghostDetermines the visual treatment of the button.

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

render(
<IconButton title="Add employee">
<Plus />
</IconButton>,
);
// The title functions as an accessible label
const button = screen.getByLabelText('Add employee');
// Alternatively we can getByRole
// const button = screen.getByRole('button', {
// name: 'Add employee',
// });
expect(button).not.toBeDisabled();
userEvent.click(button);