# Icon Button

The round sibling of Button, for an action one icon can explain.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/icon-button
```

## Usage

```tsx
import { IconButton } from '@/components/fetaui/icon-button'
import { SettingsIcon } from '@fetaui/react/rounded/settings'

export function SettingsAction() {
  return <IconButton label="Settings" icon={<SettingsIcon />} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| icon | ReactNode | required |
| label | string | required |
| variant | primary, secondary, outline, ghost, destructive | primary |
| size | sm, md, lg | md |
| status | idle, loading, success | idle |
| onSuccessEnd | () => void |  |
| animated | boolean | true |

## When to use

- In toolbars, cards and rows where space is tight.
- For actions with a well known icon, like settings or close.

## When not to use

- When the icon alone is unclear: use Button with a label.
- For a setting that stays on: use Toggle.

## Accessibility

- A native button, named by the required label.
- Loading sets aria-busy and blocks double submits.

## Motion

- Press scales to 0.98 on a firm spring.
- Set animated to false to turn off the press scale.
- With reduced motion, press is a color change only and the spinner turns slowly.