Variants
6 variants · md size
Sizes
sm (32px) · md (40px) · lg (52px)
Toolbar grouping
Common pattern — grouped action buttons
States
default · disabled
Do / Don't
✓ Do
✕ Don't
Don't stretch the width or add border-radius overrides. The square constraint is intentional.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary"|"accent"|"pink"|"secondary"|"dark"|"ghost" | "secondary" | Visual treatment. Mirrors Button variant palette exactly. |
| size | "sm"|"md"|"lg" | "md" | Sets fixed square dimensions: sm=32px, md=40px, lg=52px. |
| label | string | — | aria-label — required for accessibility. Describe the action, not the icon. |
| disabled | boolean | false | Mutes to 45% opacity, disables pointer events and motion. |
| children | ReactNode | — | The icon (SVG element). Size to match: sm=14px, md=18px, lg=22px. |
Usage
import { IconButton } from "components/core/IconButton";
// Basic
<IconButton label="Add item">
<PlusIcon />
</IconButton>
// Destructive action
<IconButton variant="dark" size="sm" label="Delete">
<TrashIcon />
</IconButton>
// Toolbar group
<div style={{ display: "flex", gap: "6px" }}>
<IconButton label="Edit"><EditIcon /></IconButton>
<IconButton label="Share"><ShareIcon /></IconButton>
<IconButton variant="primary" label="Delete"><TrashIcon /></IconButton>
</div>