Animated Button
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Press, ripple, magnetic, and asynchronous-state button interactions.
animated-button-demo
Overview
Animated Button adds tactile feedback while keeping native button semantics. Use the base Button for press and optional ripple feedback, MagneticButton for pointer attraction, and StatefulButton for loading, success, and error transitions.
Installation
Usage
import { Button, StatefulButton } from "@/components/animated/button"
<Button ripple>Continue</Button>
<StatefulButton state="loading">Save changes</StatefulButton>Accessibility
Stateful Button exposes aria-busy while loading and announces state text through a polite live region. Keep the visible label meaningful in every state and do not rely on motion alone to communicate success or failure.