IconButton

Square button with a single icon. Shares variants with Button. Always set aria-label.

Variants

<>
  <IconButton variant="primary" aria-label="Add"><Plus /></IconButton>
  <IconButton variant="default" aria-label="Add"><Plus /></IconButton>
  <IconButton variant="outline" aria-label="Add"><Plus /></IconButton>
  <IconButton variant="ghost" aria-label="Add"><Plus /></IconButton>
  <IconButton variant="link" aria-label="Add"><Plus /></IconButton>
</>

Sizes

<>
  <IconButton size="sm" aria-label="Search"><Search /></IconButton>
  <IconButton size="md" aria-label="Search"><Search /></IconButton>
  <IconButton size="lg" aria-label="Search"><Search /></IconButton>
</>

Destructive tone

<>
  <IconButton variant="primary" tone="destructive" aria-label="Delete"><X /></IconButton>
  <IconButton variant="default" tone="destructive" aria-label="Delete"><X /></IconButton>
  <IconButton variant="outline" tone="destructive" aria-label="Delete"><X /></IconButton>
  <IconButton variant="ghost"   tone="destructive" aria-label="Delete"><X /></IconButton>
</>

Accent tone (lilac)

<>
  <IconButton variant="primary" tone="accent" aria-label="Add"><Plus /></IconButton>
  <IconButton variant="default" tone="accent" aria-label="Add"><Plus /></IconButton>
  <IconButton variant="outline" tone="accent" aria-label="Add"><Plus /></IconButton>
  <IconButton variant="ghost"   tone="accent" aria-label="Add"><Plus /></IconButton>
</>

States

<>
  <IconButton aria-label="Normal"><Plus /></IconButton>
  <IconButton disabled aria-label="Disabled"><Plus /></IconButton>
  <IconButton loading aria-label="Saving"><Plus /></IconButton>
</>

Props

Prop	Type	Default
variant	"primary" \| "default" \| "outline" \| "ghost" \| "link"	"primary"
tone	"default" \| "destructive" \| "success" \| "accent"	"default"
size	"xs" \| "sm" \| "md"	"md"
loading	boolean	false
disabled	boolean	false
asChild	boolean	false
aria-label	string (required)	—

Source

packages/react/src/components/icon-button.tsx · Figma node 2718:8839