# 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';
export default () => {
return (
);
};
```
## Tone [#tone]
`neutral` is the default tone for ordinary actions. Set `tone="critical"` for destructive actions.
apps/docs/src/examples/icon-button/tones.tsx
```tsx
import { IconButton } from '@luke-ui/react/icon-button';
import { Comparison, ComparisonItem } from '#docs';
export default () => {
return (
);
};
```
## Prominence [#prominence]
`standard` is the default. Choose `low` for quiet secondary actions and `high` for the primary
action in a group. For ordinary actions, high prominence uses the theme’s primary accent treatment.
apps/docs/src/examples/icon-button/prominence.tsx
```tsx
import { IconButton } from '@luke-ui/react/icon-button';
import { Comparison, ComparisonItem } from '#docs';
export default () => {
return (
);
};
```
## Presentation reference [#presentation-reference]
apps/docs/src/examples/icon-button/presentation-reference.tsx
```tsx
import { IconButton } from '@luke-ui/react/icon-button';
import { Comparison, ComparisonItem } from '#docs';
export default () => {
return (
);
};
```
## Custom icons [#custom-icons]
Pass a decorative, non-interactive `ReactElement` to `icon` for a graphic outside the generated icon
set, such as a brand mark. `IconButton` sizes the graphic to match its built-in icons.
apps/docs/src/examples/icon-button/custom-icon.tsx
```tsx
import { createIcon } from '@luke-ui/react/icon';
import { IconButton } from '@luke-ui/react/icon-button';
export default () => {
return } />;
};
const GithubIcon = createIcon({
path: (
),
});
```
## 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. The
icon itself, whether a built-in `Icon` or a custom graphic, contributes no accessible name, so the
naming prop is required. Use a labelled [`Button`](/components/actions/button) when the icon is
unfamiliar or visible text would make the action clearer.
## API [#api]