Animated Icon Button

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.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add animated-icon-button

Example

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

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

Installs to components/galactrex/animated-icon-button.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

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.