IconButton

The IconButton component is a clickable element that displays only an icon, designed for actions where a text label is not necessary. It’s a square button with minimal styling, perfect for toolbars and compact interfaces.

<IconButton icon={Icon.Favorite} />

Features

The IconButton component is a versatile component that can be used in a variety of ways.

Variants

Icon buttons come in different variants to indicate different levels of emphasis:

<Row gap={400}>
  <IconButton variant="primary" icon={Icon.Favorite} />
  <IconButton variant="secondary" icon={Icon.Favorite} />
  <IconButton variant="tertiary" icon={Icon.Favorite} />
</Row>

Sizes

Adjust the size of icon buttons with the size prop:

<Row gap={400} align="center">
  <IconButton size="small" icon={Icon.Close} />
  <IconButton size="medium" icon={Icon.Close} />
  <IconButton size="large" icon={Icon.Close} />
</Row>

Disabled State

You can disable an IconButton to prevent user interaction.

<IconButton icon={Icon.Favorite} disabled />

Anatomy

Reference

Props

The IconButton component inherits all of the props from the HTMLButtonElement and adds the following props.

Events

The IconButton component supports the following events.

Tokens