Components / Actions
Icon Button
stableA button whose only content is an icon — used in toolbars, table rows, and cards.
Variants
Sizes
In context — table row actions
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
icon | ReactNode | — | Yes | The icon to render. |
label | string | — | Yes | Accessible name — also shown as a title tooltip. |
variant | 'ghost' | 'solid' | 'ghost' | No | Visual style. |
size | 'sm' | 'md' | 'lg' | 'md' | No | Hit area size. |
Do
- Always pass a label — it becomes the accessible name and the tooltip.
- Use ghost for low-emphasis actions in a toolbar, solid to draw more attention.
- Keep the hit area at least 36×36px, even if the icon is smaller.
Don't
- Ship an icon button without a label prop.
- Use an icon whose meaning isn’t already established elsewhere in the product.
- Pair more than 3–4 icon buttons together without a divider or grouping.