# Motion Button Ripple

Material design style ripple effect on button click.

- id: `motion-button-ripple`
- Page: https://agentic-ui-kit.com/components/motion-button-ripple
- Live preview: https://agentic-ui-kit.com/live/component/motion-button-ripple?piece=motion-button-ripple

## Install

```bash
agentic-ui add motion-button-ripple
npx shadcn@4.17.0 add @agentic-ui/motion-button-ripple
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** press-ripple, pointer-origin, keyboard-centre-origin, multiple-ripples, ripple-cap, self-removing-circles, primary-secondary-outline-variants, three-sizes, link-or-button, disabled-no-ripple, reduced-motion-fallback
- **Intents:** execute-flow, create-edit
- **Suits domains:** saas, ecommerce, crm, project-management, marketing, settings
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** material design style ripple effect on button click, button with a ripple from the click position, touch feedback wave on a primary action, press animation that shows where the user clicked
- **Avoid when:** Buttons that already have a loading or success animation of their own (use motion-async-button or motion-copy-success), Dense toolbars where dozens of ripples would be noise, Reduced-motion first products, where the press colour is enough, Elements that are not buttons or links
- **Preserve when adapting:** native-button-or-link, onclick-untouched, aria-hidden-layer, self-removing-circles, ripple-cap
- **Replace when adapting:** label, variant, size, duration, max-ripples, href
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion