Icon Button

The Icon Button component renders a button with an icon. It supports various actions, including external links and loading states.

Usage & Examples

Default IconButton

default-iconbutton.tsx
<IconButton icon={FaPlus} aria-label="Add" />

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Sizes

xs
small
medium
large

Variants

solid
outline
glass

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes
<IconButton theme="primary" icon={FaPlus} aria-label="Add" />
<IconButton theme="secondary" icon={FaPlus} aria-label="Add" />
<IconButton theme="tertiary" icon={FaPlus} aria-label="Add" />
<IconButton theme="quaternary" icon={FaPlus} aria-label="Add" />

// States
<IconButton state="success" icon={FaPlus} aria-label="Add" />
<IconButton state="warning" icon={FaPlus} aria-label="Add" />
<IconButton state="error" icon={FaPlus} aria-label="Add" />
<IconButton state="info" icon={FaPlus} aria-label="Add" />

// Sizes
<IconButton size="xs" icon={FaPlus} aria-label="Add" />
<IconButton size="small" icon={FaPlus} aria-label="Add" />
<IconButton size="medium" icon={FaPlus} aria-label="Add" />
<IconButton size="large" icon={FaPlus} aria-label="Add" />

// Variants
<IconButton variant="solid" icon={FaPlus} aria-label="Add" />
<IconButton variant="outline" icon={FaPlus} aria-label="Add" />
<IconButton variant="glass" icon={FaPlus} aria-label="Add" />

// Rounding
<IconButton rounding="none" icon={FaPlus} aria-label="Add" />
<IconButton rounding="medium" icon={FaPlus} aria-label="Add" />
<IconButton rounding="large" icon={FaPlus} aria-label="Add" />

// Shadows
<IconButton shadow="none" icon={FaPlus} aria-label="Add" />
<IconButton shadow="light" icon={FaPlus} aria-label="Add" />
<IconButton shadow="strong" icon={FaPlus} aria-label="Add" />

Interaction states

Disabled
Loading
interaction-states.tsx
// Disabled
<IconButton disabled icon={FaPlus} aria-label="Add" />
// Loading
<IconButton loading icon={FaPlus} aria-label="Add" />

Props API

43 props
Columns
Icon Button props API
Default
Description
aria-atomicbooleanNoaria—Indicates whether screen readers should present all of a live region at once.
aria-busybooleanNoaria—Indicates whether the button is busy, such as while loading.
aria-checkedboolean | "mixed"Noaria—Indicates the current checked state when the icon button behaves like a checkable control.
aria-controlsstringNoaria—Identifies the element whose contents or presence are controlled by this button.
aria-currentboolean | "page" | "step" | "location" | "date" | "time"Noaria—Indicates the current active item within a related set, when applicable.
aria-describedbystringNoaria—Optional ID reference to one or more elements that describe this control.
aria-errormessagestringNoaria—Optional ID reference to an error message element for this control.
aria-expandedbooleanNoaria—Indicates whether the associated popup element is currently expanded.
aria-haspopupboolean | "dialog" | "grid" | "listbox" | "menu" | "tree"Noaria—Indicates whether activating the control opens a popup element such as a menu or dialog.
aria-invalidbooleanNoaria—Indicates whether the control is currently invalid.
aria-labelstringNoaria—Accessible label for screen readers. Required for icon-only usage unless title is provided.
aria-labelledbystringNoaria—Optional ID reference to one or more elements that label this control.