IconButton

A square button containing only an icon. Shares the same variant system as Button, with a dedicated size scale including a 24px xxs option for dense UIs.

Overview

IconButton is identical to Button in API surface and variant system, but expects a single icon prop instead of label. The key differences from Button:

Adds a xxs (24px) size that Button does not have — useful for table-row actions and dense toolbars.
rounded prop for circular FAB-style buttons.
No label rendering — the icon is the entire visual affordance.

Always provide aria-label — the component has no label to fall back on.

Import

import { IconButton } from '@unflow/ui/components/IconButton';

Props

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Required. The icon element
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'destructive' \| 'destructiveSecondary' \| 'social'`	`'primary'`	Visual variant
`size`	`'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	Button size
`rounded`	`boolean`	`false`	Circular shape (FAB style)
`loading`	`boolean`	`false`	Shows loading spinner
`disabled`	`boolean`	`false`	Disables the button

All standard HTMLButtonElement props are forwarded.

Variants

import { Bell } from '@unflow-ui/icons/communication/bell';
import { X } from '@unflow-ui/icons/security-warnings/x';

<IconButton icon={<Bell />} variant="primary" aria-label="Notifications" />
<IconButton icon={<Bell />} variant="secondary" aria-label="Notifications" />
<IconButton icon={<Bell />} variant="tertiary" aria-label="Notifications" />
<IconButton icon={<X />} variant="destructive" aria-label="Delete" />
<IconButton icon={<X />} variant="destructiveSecondary" aria-label="Delete" />

Sizes

<IconButton icon={<Plus />} size="xxs" aria-label="Add" />  {/* 24px — exclusive to IconButton */}
<IconButton icon={<Plus />} size="xs" aria-label="Add" />   {/* 28px */}
<IconButton icon={<Plus />} size="sm" aria-label="Add" />   {/* 32px */}
<IconButton icon={<Plus />} size="md" aria-label="Add" />   {/* 40px */}
<IconButton icon={<Plus />} size="lg" aria-label="Add" />   {/* 48px */}

Rounded

<IconButton icon={<Plus />} rounded aria-label="Add" size="md" />
<IconButton icon={<Check />} rounded variant="secondary" aria-label="Confirm" size="md" />

rounded adds rounded-full to override the default rounded-md/rounded-lg. Use for FABs and circular avatar-area actions.

Loading

<IconButton icon={<Bell />} loading aria-label="Notifications loading" />

Loading uses the same Spinner system as Button — automatic scaling by size. Override via slotProps.loading.spinner.

Accessibility

Renders a native <button> — keyboard accessible, activatable with Enter/Space.
Always provide aria-label — there is no visible label text.
A console warning fires in development if aria-label is missing.

On this page