Design System
Icon Button
Square button that shows only an icon — used in toolbars, lists, and tight UI where a labeled button doesn't fit. eShop platform.
Playground
Tone
Five color tones — same tone system as Button.
Priority
Primary is filled, secondary is soft.
Size
Three square sizes: small (32 × 32), medium (44 × 44, default), large (56 × 56). Icon scales with the button.
Inverse (on dark surface)
Pass inverse when placing on a dark or bold surface.
Loading
Spinner replaces the icon while loading. The button is non-interactive.
Disabled
Disabled state uses the shared disabled fill (same for every tone).
When to Use
Best for
- Compact actions in toolbars, table rows, or card headers
- Universal actions where the icon is well known (search, close, favourite)
- Pairs of actions where space is tight — left and right arrows, plus and minus
Consider alternatives when
- The action isn't obvious from the icon alone — use a labeled Button instead
- You need a label for accessibility or context —
aria-labelhelps screen readers but sighted users still need a clear icon
Props
| Prop | Type | Required | Description |
|---|---|---|---|
icon | FC<SVGProps> | Yes | The SVGR icon component to render |
aria-label | string | Yes | Accessibility label — REQUIRED because there is no visible label |
tone | "brand" | "neutral" | "info" | "warning" | "critical" | No | Color tone (default: "brand") |
priority | "primary" | "secondary" | No | Visual weight (default: "primary") |
size | "sm" | "md" | "lg" | No | Size (default: "md") |
inverse | boolean | No | Use on-dark token variants (default: false) |
isLoading | boolean | No | Show spinner and disable interaction |
isDisabled | boolean | No | Disable the button |
onClick | (e) => void | No | Click handler |
type | "button" | "submit" | "reset" | No | HTML button type (default: "button") |
Import
import { IconButton } from '@/components/IconButton/eshop';Design Tokens
IconButton uses the same token set as Button. The geometry differs (square, equal padding all sides):
| Size | Padding | Radius | Icon | Square edge |
|---|---|---|---|---|
sm | var(--primitive-spacing-8) | var(--primitive-radius-8) | 16 × 16 | 32 × 32 |
md | var(--primitive-spacing-12) | var(--primitive-radius-12) | 20 × 20 | 44 × 44 |
lg | var(--primitive-spacing-16) | var(--primitive-radius-16) | 24 × 24 | 56 × 56 |