Ripple buttonPro
A button that ripples from wherever it's pressed.
When to use
- Primary actions where tactile feedback adds delight.
When not to use
- Dense toolbars: use the regular button.
Installation
Usage
Import it from @/components/ui/ripple-button after installing.
example.tsx
import { RippleButton } from "@/components/ui/ripple-button";
<RippleButton onClick={start}>Get started</RippleButton>API reference
RippleButton
A native button with a ripple from the press point. Accepts button attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "outline" | "primary" | Style. |
| rippleColor | string | – | Defaults to the text color. |
Keyboard interactions
| Keys | Action |
|---|---|
| EnterorSpace | Press (ripples from the center) |
Accessibility
- A real button; ripples are hidden from assistive tech and skipped under reduced motion.
Motion
- Ripples expand to cover the button and fade (650ms); the button presses in slightly.
Responsive behavior
- Hugs its label.
Performance
- Each ripple removes itself when done.
Notes for AI
- Combine with type="submit" in forms; it defaults to type="button".
This page as Markdown, for assistants and coding agents:
/components/ripple-button/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt