Button
formA versatile button component with multiple variants, sizes, and a loading state. Built with CVA for variant management and Framer Motion for micro-interactions.
import { Button } from '@/components/forge'Preview
Button
Code Example
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'primary' | No | Visual style variant |
size | 'sm' | 'md' | 'lg' | 'md' | No | Controls height and padding |
loading | boolean | false | No | Shows spinner and disables interaction |
disabled | boolean | false | No | Disables the button |
className | string | - | No | Additional CSS classes merged via clsx + tailwind-merge |
children | React.ReactNode | - | Yes | Button content |
Variants
primarysecondaryghostdanger
Accessibility
- Uses native <button> element for full keyboard support
- Disabled state communicated via aria-disabled
- Loading state sets aria-busy and visually indicated by spinner
- Focus ring uses --gridnest-accent color with focus-visible selector