# Icon Button (/docs/components/actions/icon-button)
Use `IconButton` for compact actions where an icon can carry the visible UI. Always provide an
accessible label.
```tsx
```
## Best practices [#best-practices]
| Guidance | Practices |
| -------- | ---------------------------------------------------------------------------- |
| Do | Name the action in `aria-label`, such as "Delete row". Do not name the icon. |
| Do | Use `tone="danger"` for destructive icon actions such as delete. |
## Tone and appearance [#tone-and-appearance]
`IconButton` shares Button's appearance API. Tone can be `neutral` (default), `accent`, or `danger`.
Appearance can be `solid` (default), `subtle`, or `ghost`.
## Size [#size]
## Pending [#pending]
Set `isPending` while an action is in flight. The button remains focusable but cannot be pressed
again. It uses the disabled visual treatment and replaces the icon with a busy cue.
## Accessibility [#accessibility]
`IconButton` has no visible text label. Always provide `aria-label` or `aria-labelledby`. Without
one, screen readers have no way to announce the button's purpose.
```tsx
```
## When to use vs Button [#when-to-use-vs-button]
Use `IconButton` when the icon alone communicates the action and space is tight, such as in
toolbars, table row actions, or close buttons.
Use `Button` when you need a visible text label. Labels are clearer for unfamiliar users.
## Props [#props]