Ripple Button

A button that animates on tap with a ripple effect.

variant

size

Installation

<RippleButton>
  Ripple Button
  <RippleButtonRipples />
</RippleButton>

Prop	Type	Default
`variant?`	`"default" \| "accent" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`default`
`size?`	`"default" \| "sm" \| "lg" \| "icon"`	`default`
`hoverScale?`	`number`	`1.05`
`tapScale?`	`number`	`0.95`
`...props?`	`HTMLMotionProps<"button">`	-

Prop	Type	Default
`color?`	`string`	`var(--ripple-button-ripple-color)`
`scale?`	`number`	`10`
`transition?`	`Transition`	`{ duration: 0.6, ease: 'easeOut' }`
`...props?`	`HTMLMotionProps<"span">`	-

Prop	Type	Default
`--ripple-button-ripple-color?`	`color`	-

Built by Skyleen. The source code is available on GitHub.