Skip to content
DOL Studio

IconButton

Design: Stable Code: Coded Alias of button icon-onlytoolbarutility 5 Figma sets Button icon/Block button icon

Live preview

3 case showcases

Common IconButton compositions — confirm (primary + check), settings (secondary + gear), and disabled state. `aria-label` is mandatory since icon-only has no inner text.
primary · check
secondary · gear
primary · disabled

Import & files

Import
import { IconButton } from "packages/@dol/ui/src/button/Button";
Source file
packages/@dol/ui/src/button/Button.tsx

Spec

Spec Props · Axes · Size · Usage

Props

Prop Type Default Description
label string - —
icon ReactNode - —
size '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' 'md' —
shape 'block' | 'round' | 'square' | 'circle' 'block' —
intent 'primary' | 'secondary' | 'tertiary' 'primary' —
tone 'brand' | 'neutral' | 'danger' | 'success' | 'amber' | 'blue' | 'white' from intent —
variant 'solid' | 'filled' | 'outline' | 'soft' | 'matte' | 'filled-matte' | 'ghost' 'solid' —
isLoading boolean false —
iconClassName string - —
onClick / disabled / aria-pressed / type native button props — —

Variants · Tones · Sizes

Variants
solidoutlinesoftghost
Tones
brandneutralbluedangersuccessamberwhite
Sizes
3xs2xsxssmmdlgxl2xl3xl

Size spec

Size Height Pad LR Pad TB Radius Text Icon
3xs 16 2 2 12 0 12
2xs 20 3 3 12 0 14
xs 24 4 4 12 0 16
sm 32 6 6 12 0 20
md 36 8 8 14 0 20
lg 40 8 8 16 0 24
xl 48 12 12 16 0 24
2xl 56 12 12 20 0 24
3xl 64 12 12 24 0 24

Figma `Button icon/Size` node 9523:115550. Block radius comes from button radius tokens; round uses pill shape.

Usage

Use IconButton for compact, icon-only actions where the surrounding UI already provides context. Use text Button for primary CTAs, Switch/Toggle for stateful toggles, and a nav/link pattern for navigation.

Examples

Examples 5
  • Core
  • Size options
  • Shape options
  • Variant options
  • Intent mapping

Figma source

Figma source 5 sets
Page
Button
Sets
5
Primary set
Button icon/Block button icon · 192 variants Open in Figma →
Showing: Button icon/Block button icon
4 other sets
  • Button icon/Round button icon 184 variants Figma →
  • Button icon/Secondary button icon 180 variants Figma →
  • Button icon/Size 18 variants Figma →
  • Button icon/Touch button for mobile 12 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# IconButton
Slug: `button`
Domain: general · Category: actions
Design: stable · Code: coded
Alias of: `button`


## Description
Icon-only action button aligned to Figma Button icon sets. Supports the 9-step Button icon size scale, block/round shapes, solid/outline/filled-matte/ghost emphasis, and intent-to-tone mapping for Primary / Secondary / Tertiary.


## Import
```ts
import { IconButton } from "packages/@dol/ui/src/button/Button";
```
Source: `packages/@dol/ui/src/button/Button.tsx`


## Props (10)
| Prop | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | - |  |
| `icon` | `ReactNode` | - |  |
| `size` | `'3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` | 'md' |  |
| `shape` | `'block' | 'round' | 'square' | 'circle'` | 'block' |  |
| `intent` | `'primary' | 'secondary' | 'tertiary'` | 'primary' |  |
| `tone` | `'brand' | 'neutral' | 'danger' | 'success' | 'amber' | 'blue' | 'white'` | from intent |  |
| `variant` | `'solid' | 'filled' | 'outline' | 'soft' | 'matte' | 'filled-matte' | 'ghost'` | 'solid' |  |
| `isLoading` | `boolean` | false |  |
| `iconClassName` | `string` | - |  |
| `onClick / disabled / aria-pressed / type` | `native button props` | — |  |


## Axes
Variants: `solid`, `outline`, `soft`, `ghost`
Tones: `brand`, `neutral`, `blue`, `danger`, `success`, `amber`, `white`
Sizes: `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`


## Usage
Use IconButton for compact, icon-only actions where the surrounding UI already provides context. Use text Button for primary CTAs, Switch/Toggle for stateful toggles, and a nav/link pattern for navigation.


## Examples
- **Core**
- **Size options**
- **Shape options**
- **Variant options**
- **Intent mapping**


## Figma source
Page: Button
Sets: 5
Primary: Button icon/Block button icon
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=18944-23135

Related

  • Button

    Coded

  • Switch

    Coded
  • S
    layout

    Scroller

    Design only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).