# Icon Button (/components/actions/icon-button)
`IconButton` triggers a familiar compact action, such as closing a panel, deleting a row, or adding
an item. Give every icon button an accessible name because it has no visible label.
apps/docs/src/examples/icon-button/basic.tsx
```tsx
import { IconButton } from '@luke-ui/react/icon-button';
export default () => {
return ;
};
```
## Size [#size]
`medium` is the default. Use `small` for compact toolbars and dense row actions. Keep controls in a
group at the same size.
apps/docs/src/examples/icon-button/size.tsx
```tsx
import { IconButton } from '@luke-ui/react/icon-button';
import { Comparison, ComparisonItem } from '#docs/comparison';
export default () => {
return (
);
};
```
## Appearance [#appearance]
`IconButton` uses the same `appearance` options as [`Button`](/components/actions/button). `solid`
is the default. Choose `subtle` or `ghost` when a secondary control needs less emphasis.
apps/docs/src/examples/icon-button/appearance.tsx
```tsx
import { IconButton } from '@luke-ui/react/icon-button';
import { Comparison, ComparisonItem } from '#docs/comparison';
export default () => {
return (
);
};
```
## Tone [#tone]
Use `tone` to communicate intent. `neutral` is the default, `accent` identifies a primary action,
and `danger` marks a destructive one.
apps/docs/src/examples/icon-button/tones.tsx
```tsx
import { IconButton } from '@luke-ui/react/icon-button';
import { Comparison, ComparisonItem } from '#docs/comparison';
export default () => {
return (
);
};
```
## Pending and Actions [#pending-and-actions]
`IconButton` uses the same pending and Action behaviour as [`Button`](/components/actions/button).
See Button’s [Pending and Actions](/components/actions/button#pending-and-actions) guidance.
apps/docs/src/examples/icon-button/pending.tsx
```tsx
import { IconButton } from '@luke-ui/react/icon-button';
export default () => {
return ;
};
```
## Disabled [#disabled]
Set `isDisabled` when the action is unavailable. Disabled controls cannot receive focus or respond
to presses.
apps/docs/src/examples/icon-button/disabled.tsx
```tsx
import { IconButton } from '@luke-ui/react/icon-button';
export default () => {
return ;
};
```
## Accessibility [#accessibility]
Provide `aria-label` or `aria-labelledby` for every icon button. Name the action, not the icon. Use
a labelled [`Button`](/components/actions/button) when the icon is unfamiliar or visible text would
make the action clearer.
## API [#api]