components
IconButton
A square, icon-only control. An aria-label is required, since there is no visible text. Defaults to the neutral tone and ghost emphasis. Every size is a square tap target; md is 48px.
Emphasis
solid
soft
outline
ghost
Sizes
sm 40px, md 48px, lg 56px. All clear the touch floor.
sm
md
lg
In context
Common uses.
favorite
settings
close, solid
disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| aria-label | string | none | Required. Accessible name for the icon-only control. |
| icon | ReactNode | none | The icon element to render. |
| tone | Tone | neutral | Semantic intent. |
| emphasis | Emphasis | ghost | solid, soft, outline, ghost. |
| size | ControlSize | md | sm (40px), md (48px), lg (56px), square. |