# ActionIcon

**When to use:** Clickable icon button without a label — toolbar actions, table row actions, close buttons, icon-only controls.

**Keywords:** toolbar button, icon button, close, ghost

**Import:** `import { ActionIcon } from '@ahrowe/ui'`

**Requires:** `@fortawesome/free-solid-svg-icons` peer dependency.

An ActionIcon is a [Button](Button.md) holding only an icon and sized by it: a real `<button>`
with Button's hover, focus ring and ripple, or with an `href` a link, as a Button is. It takes Button's `styleType` and `color`, plain and
in the surrounding text colour by default, so it fits whatever it sits on.

```tsx
import { ActionIcon, ButtonStyleType, ThemeColor } from '@ahrowe/ui';
import { faPhone, faTrash, faXmark } from '@fortawesome/free-solid-svg-icons';

<ActionIcon icon={faXmark} aria-label="Close" onClick={onClose} />

// A destructive row action
<ActionIcon icon={faTrash} color={ThemeColor.Error} title="Delete item" onClick={handleDelete} />

// A link: a long press copies the number
<ActionIcon icon={faPhone} href="tel:+431234567" aria-label="Call" />

// Filled, for an action that should stand out
<ActionIcon icon={faTrash} styleType={ButtonStyleType.Filled} color={ThemeColor.Error} aria-label="Delete" />
```

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `icon` | `IconDefinition \| ReactElement` | FontAwesome icon or any React element (required) |
| `styleType` | `ButtonStyleType` | Default `Plain`; any of Button's styles |
| `color` | `ColorValue` | A `ThemeColor` (default `Neutral`) or any CSS colour, see [ThemeColor.md](ThemeColor.md) |
| `title` | `string` | Tooltip. Give an icon-only button an `aria-label` as well |
| `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void \| Promise<void>` | Click handler |
| `disabled` | `boolean` | Fades it and blocks clicks |
| `href` | `string` | Renders it as an `<a>`, with `target`, `rel` and `download`. See [Button.md](Button.md) |
| `ref` | `Ref<HTMLButtonElement>` | Ref to the button, or `Ref<HTMLAnchorElement>` with an `href` |

Every other Button prop and native `<button>` attribute passes through, except `size`,
`children`, `isLoading` and `shortcut`. The box is the icon plus `4px` on each side; set `width`
and `height` for a different one.

**Slots:** `root` `icon`

## Migration from the div

Before 0.43 an ActionIcon was a `div` with a button role and no colour of its own.

- **Types:** `ref` is `Ref<HTMLButtonElement>` and `onClick` receives a
  `MouseEvent<HTMLButtonElement>`. A handler annotated with `HTMLDivElement` no longer compiles;
  drop the annotation or change it. The same goes for the `onClick` of Card and SectionHeader
  `actions`, which render ActionIcons.
- **Layout:** it is inline, like a button, where the div was a block of its own width. In a flex
  row nothing changes; on its own in a block it now sits in the line.
- **Look:** it has Button's hover tint, focus ring and ripple, where the div only darkened on
  hover. It takes the surrounding text colour as before; a colour of its own is now `color`.