IconButton

A circular button containing only an icon. Use IconButton for compact actions where space is limited or when the icon alone clearly communicates the action's purpose.

IconButton uses the same fixed 34px control geometry and interaction treatment as Button and Link. Use jss only for exceptional layout overrides.

Props

Basic variants

IconButtons come in different colors to indicate their purpose. Always pair with a clear, recognizable icon.

<IconButton
  icon="check"
  color="primary"
  aria-label="Confirm"
  onClick={() => {}}
/>

<IconButton
  icon="pencil"
  color="secondary"
  aria-label="Edit"
  onClick={() => {}}
/>

<IconButton
  icon="trash-2"
  color="negative"
  aria-label="Delete"
  onClick={() => {}}
/>

Bare variant

The bare variant removes the background and elevation entirely, leaving only the icon.

<IconButton
  bare
  icon="x"
  color="secondary"
  aria-label="Close"
  onClick={() => {}}
/>

Common use cases

// Social actions
<IconButton bare icon="heart" color="negative" aria-label="Like" onClick={() => {}} />
<IconButton bare icon="bookmark" color="secondary" aria-label="Save" onClick={() => {}} />
<IconButton bare icon="share-2" color="secondary" aria-label="Share" onClick={() => {}} />

// Menu trigger
<IconButton bare icon="ellipsis" color="secondary" aria-label="More options" onClick={() => {}} />

Accessibility

Since IconButtons have no visible text, always provide an aria-label to describe the action for screen reader users.

// Good - has accessible label
<IconButton
  icon="trash-2"
  color="negative"
  aria-label="Delete item"
  onClick={() => {}}
/>

// Bad - no accessible label
<IconButton
  icon="trash-2"
  color="negative"
  onClick={() => {}}
/>

Consider using a Tooltip component alongside IconButton to provide visual hints for all users.