Icon Button

A square or circular button that contains only an icon. Always requires an accessible label prop which becomes the aria-label and title tooltip.

ExamplesCodeUsageChangelog

Variants

Ghost (default)

Use in toolbars, table rows, and any dense surface where a full-width label would be noisy.

Tailwind v4

<IconButton label="Edit">
  <svg .../>
</IconButton>

Primary

Tailwind v4

<IconButton variant="primary" label="Add">
  <svg .../>
</IconButton>

Secondary

Tailwind v4

<IconButton variant="secondary" label="Download">
  <svg .../>
</IconButton>

Subtle

Tailwind v4

<IconButton variant="subtle" label="Filter">
  <svg .../>
</IconButton>

All variants

Tailwind v4

<IconButton variant="primary" label="Primary"><svg .../></IconButton>
<IconButton variant="secondary" label="Secondary"><svg .../></IconButton>
<IconButton variant="ghost" label="Ghost"><svg .../></IconButton>
<IconButton variant="subtle" label="Subtle"><svg .../></IconButton>

Sizes

Tailwind v4

<IconButton size="sm" label="Small"><svg .../></IconButton>
<IconButton size="md" label="Medium"><svg .../></IconButton>
<IconButton size="lg" label="Large"><svg .../></IconButton>

Circle shape

Tailwind v4

<IconButton shape="circle" label="Close"><svg .../></IconButton>
<IconButton shape="circle" variant="primary" label="Add"><svg .../></IconButton>

States

Loading

Tailwind v4

<IconButton :loading="saving" label="Save"><svg .../></IconButton>

Disabled

Tailwind v4

<IconButton disabled label="Not available"><svg .../></IconButton>

Selected

Tailwind v4

<IconButton :selected="isActive" label="Toggle view"><svg .../></IconButton>