IconButton – Once UI

The IconButton component provides a compact, icon-based interactive element for user actions. It's ideal for toolbar actions, navigation controls, and other UI elements where space is limited.

IconButton

<IconButton icon="check" variant="primary" />
<IconButton icon="plus" variant="secondary" />
<IconButton icon="chevronDown" variant="tertiary" />
<IconButton icon="danger" variant="danger" />
<IconButton icon="info" variant="ghost" />
<IconButton icon="sparkle" variant="quaternary" />
<IconButton icon="settings" variant="subtle" />
<IconButton icon="check" variant="success" />
<IconButton icon="warning" variant="warning" />
<IconButton icon="link" variant="link" />

Sizes

IconButtons come in different sizes to accommodate various use cases.

Sizes

<IconButton icon="chevronDown" size="s" />
<IconButton icon="chevronDown" size="m" />
<IconButton icon="chevronDown" size="l" />

Add tooltips to provide context for icon buttons.

Tooltip

<IconButton variant="secondary" icon="check" type="button" tooltip="Confirm" tooltipPosition="left" />
<IconButton variant="secondary" icon="danger" type="button" tooltip="Delete" tooltipPosition="top" />
<IconButton variant="secondary" icon="info" type="button" tooltip="Information" tooltipPosition="bottom" />
<IconButton variant="secondary" icon="warning" type="button" tooltip="Warning" tooltipPosition="right" />

Accessible name

An icon button has no text, so it needs a name for screen readers. It takes the first of aria-label, ariaLabel and a tooltip that is plain text, so the tooltips above already name their buttons. It is never named after its icon key. Without any of them it warns in development.

Accessible name

<IconButton icon="close" aria-label="Close dialog" />
<IconButton icon="search" ariaLabel="Search" />
<IconButton icon="copy" tooltip="Copy link" />

Radius

Customize the border radius of the IconButton for different design needs.

Radius

<IconButton icon="chevronLeft" corners="top-left" />
<IconButton icon="chevronDown" corners="none" />
<IconButton icon="chevronRight" corners="bottom-right" />

As link

IconButtons can function as links when provided with an href property.

Links

<IconButton icon="arrowUpRight" href="#" variant="secondary" aria-label="Open link" />
<IconButton icon="chevronRight" href="#" variant="tertiary" aria-label="Next" />

Custom content

Use the children prop to add custom content to the IconButton.

Custom content

<IconButton>
  <Text variant="body-strong-s">A</Text>
</IconButton>
<IconButton variant="secondary">
  <Text variant="body-strong-s">B</Text>
</IconButton>
<IconButton variant="tertiary">
  <Text variant="body-strong-s">C</Text>
</IconButton>

API reference

	Type	Default
icon	IconName	refresh
id	string	—
size	xllmsxs	m
corners	nonetoprightbottomlefttop-lefttop-rightbottom-rightbottom-left	—
rounded Fully rounded corners.	boolean	false
tooltip Hover and focus hint. A plain-text tooltip also names the button when it has no aria-label.	ReactNode	—
tooltipPosition	topbottomleftright	top
variant	primarysecondarytertiaryquaternarysubtledangersuccesswarningghostlink	primary
loading Swap the icon for a spinner and block interaction.	boolean	false
disabled	boolean	false
className	string	—
style	React.CSSProperties	—
href	string	—
children	React.ReactNode	—
color	`${ColorScheme}-${ColorWeight}`	—
ariaLabel The accessible name, as on the other components. A native aria-label wins over it.	string	—
…and every React.ButtonHTMLAttributes prop	inherited	—