Docs
Ripple Button

Ripple Button

Button with a Material Design-style expanding ripple animation on click, available in three variants.

Installation

Usage

import { RippleButton } from "@/components/pioneerui/ripple-button"
 
export default function Page() {
  return (
    <>
      <RippleButton variant="default">Get Started</RippleButton>
      <RippleButton variant="outline" rippleColor="rgba(139,92,246,0.3)">
        Learn More
      </RippleButton>
    </>
  )
}

Props

PropTypeDefaultDescription
variant"default" | "outline" | "ghost""default"Visual style
rippleColorstring"rgba(255,255,255,0.35)"Color of the ripple circle
childrenReactNodeButton label