Components/Button
Button
A flexible, accessible button component with multiple variants, sizes, loading states, and icon support. Powered by spring animations via Motion v12.
import { Button } from "@animui/ui"Variants
Six built-in variants cover the most common use cases.
Sizes
Use size to adjust padding and font size.
Loading state
Pass loading to show a spinner and prevent double-submission.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "ghost" | "danger" | "gradient" | "glow" | "default" | Controls the visual style of the button. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "md" | Controls padding and font size. |
disabled | boolean | false | Disables interaction and applies reduced opacity. |
loading | boolean | false | Shows a spinner and disables the button while an async operation is in progress. |
className | string | — | Additional Tailwind classes to apply to the button element. |
onClick | () => void | — | Click handler for the button. |
type | "button" | "submit" | "reset" | "button" | HTML button type attribute. |
Accessibility
- ✓Renders a native
<button>element — keyboard focusable by default. - ✓Focus ring meets WCAG 2.4.11 minimum contrast requirements.
- ✓Loading state sets
aria-busy="true"andaria-disabled="true". - ✓Icon-only buttons: pass
aria-labelfor screen reader context.