Variants
Badged
variant="badged" — primary face with a theme-aware trailing chip. Pass badge for the label (New, Beta, Pro, …).
Sizes
Icons
Icon only
Loading
Static variants below; click the primary button to run a real submit cycle.
Animation variants
animationVariant — press motion is separate from visual variant. Click each button to feel the difference.
Disabled and link
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme — zinc-folio, magenta-edit, indigo-glass, warm-ledger, lime-meadow, cream-block, atelier, sky-flat, sage-wedge, ember-velvet, polar-frost, ink-line, bone-still, volt-arc, prism-scan, bubble-gloss, or cloud-loop. |
| mode | Optional | "light" | "dark" | light | Color mode — swaps token palette for light or dark surfaces. |
| variant | Optional | "primary" | "secondary" | "ghost" | "destructive" | "success" | "badged" | primary | Visual emphasis. Badged is primary chrome with a trailing label chip — requires badge. Success for positive confirmations. Destructive for irreversible actions. |
| size | Optional | "sm" | "md" | "lg" | md | Touch-friendly height (md/lg meet 44px target). |
| type | Optional | "button" | "submit" | "reset" | button | Native button type. Use submit inside forms. |
| onClick | Optional | (event) => void | — | Click handler. Blocked while loading or disabled. |
| loading | Optional | boolean | false | Shows spinner, sets aria-busy, prevents duplicate submits. |
| loadingLabel | Optional | string | Loading | Screen reader label during loading. |
| badge | Optional | ReactNode | — | Trailing label when variant is badged (e.g. New, Beta). Required with variant="badged". |
| leftIcon / rightIcon | Optional | ReactNode | — | Optional icons. Icon-only buttons need aria-label. Not used with variant badged. |
| fullWidth | Optional | boolean | — | Stretch to container width. |
| animationVariant | Optional | "default" | "none" | "ripple" | "scale" | "sink" | "lift" | "pulse" | "glow" | default | Press animation variant. Ripple expands from the pointer; scale/sink/lift/pulse/glow are explicit motion styles; default uses the theme recipe; none disables press transforms. |
| href | Optional | string | — | Renders as <a> for navigation. Adds rel on target=_blank. |
| disabled | Optional | boolean | — | Native disabled + cursor-not-allowed. |
| ...rest | Optional | ButtonHTMLAttributes | AnchorHTMLAttributes | — | All standard onClick, aria-*, data-*, form, name, etc. |