Animated React button components
Bell toggle
A pill toggle where a press rings the bell, crossfades the label and unfurls the pill.
Buttons, press, Motion + GSAP
Install
npm i @gsap/react clsx gsap motion tailwind-merge && curl -o components/bell-toggle.tsx https://motion-brew.com/r/bell-toggle.tsxOne self contained file for React and Tailwind CSS: bell-toggle.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { BellToggle } from "@/components/bell-toggle";
export default function Page() {
const [on, setOn] = useState(false);
return <BellToggle on={on} onChange={setOn} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| on | boolean | Whether it is on; leave out to let it keep its own state | |
| defaultOn | boolean | false | Whether it starts on |
| onChange | (on: boolean) => void | Called with the new state | |
| label | string | "Notify me" | Label while off |
| onLabel | string | "Notifications on" | Label while on |
| className | string | Size and shape of the pill |
More buttons
- Slide commit: Slide to confirm: drag the handle past the line and it commits with a spinner and a green check; let go early and it springs home.
- Download button: A download pill whose page icon fills up like liquid as the percentage counts, while a waving fill sweeps across, then a check lands on the page.
- Receipt button: A pay button that turns into a receipt printer: progress fill, check draw, line-by-line paper feed and a torn-off receipt.
- Fuse button: An action button whose done state carries an undo on a burning fuse.