RippleButton
ripple-buttonEmits pointer-positioned ripples when the button is activated.
Usage
Basic usage
After clicking, Material Feng Shui ripples will spread in a circle from the landing point, and will be automatically removed when the animation ends.
<RippleButton>Click here to see the ripples</RippleButton>Ripple speed
duration Controls the duration of a single ripple diffusion.
<RippleButton duration="400ms">Fast</RippleButton>
<RippleButton duration="900ms">Slow</RippleButton>Customized ripple color
rippleColor specifies the ripple color, the default is primary-foreground.
<RippleButton rippleColor="rgba(255,255,255,0.7)">High contrast ripple</RippleButton>When to use
Use RippleButton when an action needs Material-style feedback that expands from the pointer position. Use Button for ordinary actions, or ShimmerButton, RainbowButton, or PulsatingButton for continuous visual emphasis rather than click feedback.
Import
import { RippleButton } from "@hulianui/ui"Props
Accepts all native <button> props, including disabled and type.
| Name | Type | Default | Description |
|---|---|---|---|
| rippleColor | string | var(--color-primary-foreground) | Ripple color. |
| duration | string | "600ms" | Duration of one ripple animation. |
Events
| Event | Type | Description |
|---|---|---|
| onClick | (e: MouseEvent<HTMLButtonElement>) => void | Transparently transmit native click callback (click triggers ripple diffusion at the same time) |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Button content (copy/icon) |
Example
<RippleButton>Show ripple</RippleButton><RippleButton duration="900ms">Show slow ripple</RippleButton>Usage guidelines
The ripple animation is automatically suppressed under prefers-reduced-motion: reduce; consumers do not need to add a separate motion check.
Related
Button · ShimmerButton · RainbowButton · PulsatingButton · ButtonGroup · SocialButton
Playground
<RippleButton duration="600ms">Click here to see the ripples</RippleButton>