---
url: https://react-ui.bas.dev/actions/icon-button.md
---
# IconButton
A button that is an icon and no word. It is a square, and the one place the icon inside it gets its size. Its `label` is the accessible name and the tooltip at once, so the two never drift apart.
```tsx
import { IconButton } from '@basmilius/react-ui';
```
## Sizes
The size decides the square, the radius and the icon inside: 16 in the default 32, 14 in 28 (`sm`), and 12 in 24 (`xs`) and 20 (`2xs`). Never set a height, a width or a radius on it. `w-auto` is the one way to widen it, for a word beside the icon handed in as children.
## Toggles and state
`active` draws the button as a pressed key, for a toggle that is on. Where the button is a real toggle, use `aria-pressed` instead, as the bold and italic buttons above do. The theme draws both the same. `spin` turns the icon for a step that is running.
`iconClassName` goes to the icon rather than the button, for a chevron that turns when its section opens, a status icon in its own tone or a filled glyph (`fill-current`). The icon keeps the size of the button; one that needs another size is handed in as `children` without `icon`.
A disabled icon button with `disabled` loses its tooltip, because a disabled button takes no pointer events. With `aria-disabled` it keeps its focus and its tooltip, which can say why nothing happens.
## As another element
`render` makes another element the button, such as a menu trigger. The trigger's behavior and the button's look merge into one element:
```tsx
} />
...
```
## Props
`IconButton` takes every prop of a `