# Animated Icon Button

> Icons that act out what they do.

The bell rings, the bin lifts its lid, the heart beats, the plane takes off, the arrow drops into the tray, the gear turns. Over before you click.

- Family: Buttons
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/animated-icon-button/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add animated-icon-button
```

It installs to `components/galactrex/animated-icon-button.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { AnimatedIconButton } from "@/components/galactrex/animated-icon-button";

<AnimatedIconButton icon="bell" label="Notifications" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `"bell" \| "trash" \| "heart" \| "send" \| "refresh" \| "download" \| "settings" \| "search"` | — | Which icon. |
| `label` | `string` | — | What it does; its accessible name. |
| `children` | `ReactNode` | — | Optional visible text. |
| `size` | `number` | `20` | Icon size in px. |
| `...button props` | `ButtonHTMLAttributes` | — | onClick, disabled, type and the rest. |

## Variants

- **Icon only.** Toolbars and cards.
- **With text.** Pass children for a labelled button.

## Accessibility

- Named by `label` when icon-only.

## Motion

- Per-part variants on hover, focus and press.
- Reduced motion: still icons.