Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Docs
Ripple Button

Ripple Button

An animated button with ripple useful for user engagement.

Installation

Usage

import { RippleButton } from "@/components/magicui/ripple-button";
<RippleButton>Ripple Button</RippleButton>

Props

PropTypeDefaultDescription
childrenReact.ReactNode-The content of the button.
classNamestring-Additional class names for the button.
rippleColorstring-The rbg numbers only for the color of the rippling waves.
durationstring-The time span of one ripple.

Credits