# Ripple button

> A button that ripples from wherever it's pressed.

Component · Pro · https://lodeui.com/components/ripple-button

## When to use

- Primary actions where tactile feedback adds delight.

## When not to use

- Dense toolbars: use the regular button.

## Installation

```bash
npx shadcn@latest add @lode/ripple-button
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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 |
| --- | --- |
| Enter / Space | 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".

## Related

- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [Magnetic](https://lodeui.com/components/magnetic) — Makes any element lean toward the pointer and spring back.