║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Ripple Button description: A button that animates on tap with a ripple effect. author: name: imskyleen url: https://github.com/imskyleen

<ComponentPreview name="demo-components-buttons-ripple" />

Installation

<ComponentInstallation name="components-buttons-ripple" />

Usage

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

API Reference

RippleButton

<ExternalLink href="https://animate-ui.com/docs/primitives/buttons/ripple#ripplebutton" text="Animate UI API Reference - Ripple Button Primitive" />

<TypeTable type={{ variant: { description: 'The variant of the button.', type: '"default" | "accent" | "destructive" | "outline" | "secondary" | "ghost" | "link"', required: false, default: 'default', }, size: { description: 'The size of the button.', type: '"default" | "sm" | "lg" | "icon"', required: false, default: 'default', }, hoverScale: { description: 'The scale of the button on hover.', type: 'number', required: false, default: 1.05, }, tapScale: { description: 'The scale of the button on tap.', type: 'number', required: false, default: 0.95, }, '...props': { description: 'The props for the button.', type: 'HTMLMotionProps<"button">', required: false, }, }} />

RippleButtonRipples

<TypeTable type={{ color: { description: 'The color of the ripple.', type: 'string', required: false, default: 'var(--ripple-button-ripple-color)', }, scale: { description: 'The scale of the ripple.', type: 'number', required: false, default: 10, }, transition: { description: 'The transition of the ripple.', type: 'Transition', required: false, default: "{ duration: 0.6, ease: 'easeOut' }", }, '...props': { description: 'The props for the ripple.', type: 'HTMLMotionProps<"span">', required: false, }, }} />

CSS Variables

<TypeTable type={{ '--ripple-button-ripple-color': { description: 'The color of the ripple.', type: 'color', required: false, }, }} />

Credits

• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║