Foundations

Button

Four variants (primary, secondary, ghost, destructive) with framer-motion spring physics, a rotating conic-gradient hover trace, and per-theme primary gradients.

Button is a spring-tap interactive primitive. primary renders the active theme's signature gradient — aurora violet on dark, citrus on lemon-fizz, mint on mint-breeze — so it never clashes with the rest of the surface. secondary is a glass-on-glass card-tone option, ghost is a text-only fallback, destructive reuses the theme's danger gradient.

Every button is wrapped in framer-motion's whileHover (1.02× scale) and whileTap (0.97× scale) so taps feel like real taps. The conic-gradient button-trace outline rotates around primary buttons on hover — pure CSS via @property, no animation library required.

Async-friendly: pass loading to render an inline spinner and disable the button.

Example

tsx

import { Button } from '@kidcash/ui';

<Button variant="primary" size="lg" iconLeft={<span>✨</span>}>
  Save my allowance
</Button>

<Button variant="destructive" loading>
  Deleting…
</Button>

Try it live

← Back to the playground to see Button rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.

← Previous

GlassCard

Pill