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" tooltip="Confirm" tooltipPosition="left" />
<IconButton variant="secondary" icon="danger" tooltip="Delete" tooltipPosition="top" />
<IconButton variant="secondary" icon="info" tooltip="Information" tooltipPosition="bottom" />
<IconButton variant="secondary" icon="warning" tooltip="Warning" tooltipPosition="right" />

Radius

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

Radius

<IconButton icon="chevronLeft" corners="top-left" />
<IconButton icon="chevronDown" radius="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" />
<IconButton icon="chevronRight" href="#" variant="tertiary" />

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

Prop	Type	Default
icon	IconName	refresh
id	string	—
size	xllmsxs	m
corners	nonetoprightbottomlefttop-lefttop-rightbottom-rightbottom-left	—
rounded Fully rounded corners.	boolean	false
tooltip	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}`	—
…and every React.ButtonHTMLAttributes prop	inherited	—