Components
Loading preview...
Part of the EaseMize library, this highly customizable React button component offers a theme-aware JavaScript click ripple and four distinct visual variants (default, ghost, hover, hoverborder). Designed to be "Easy to use, great to customize," it seamlessly integrates rich visual feedback and interactive hover animations into your applications.
@easemize
npx shadcn@latest add https://21st.dev/r/easemize/multi-type-ripple-buttonsimport { RippleButton } from "@/components/ui/multi-type-ripple-buttons";
const DemoOne = () => {
return (
<div className="flex w-full h-screen justify-center items-center flex-row gap-4">
<RippleButton> Click Me </RippleButton>
<RippleButton variant="hover" hoverRippleColor="#16A34A">
<div className="flex items-center gap-2">
<span>✓</span>
<span>Success</span>
</div>
</RippleButton>
<RippleButton variant="ghost" className="rounded-full"> X </RippleButton>
<RippleButton variant="hoverborder" hoverBorderEffectThickness="3px" hoverBorderEffectColor="#DC2626"> Border </RippleButton>
</div>
);
};
export { DemoOne };