Adds a Material-style ink ripple on pointer press or Enter/Space. Attach base-ripple to any host — buttons, cards, list rows, and custom surfaces.
Works with base-button and friends. Default ink is soft white for filled buttons.
On light backgrounds, set a dark rippleColor. Use rippleCentered to always expand from the middle.
Tune speed with rippleDuration (ms). Gate the effect with rippleDisabled, or rely on the native disabled attribute.
Run the following command to add this directive to your project:
npx base-ui-cli add ripple
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add ripple
// Paths are relative to aliases.components (default: src/app/components)
import { RippleDirective } from './ripple/ripple.directive';
@Component({
selector: 'app-your-component',
imports: [
RippleDirective
],
template: `...`
})
export class YourComponent {} API for ripple — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
[base-ripple] | rippleColor | unknown | DEFAULT_COLOR | Ink color (any CSS color). Defaults to a soft white for filled buttons. Use a dark rgba on light surfaces. |
[base-ripple] | rippleCentered | boolean | false | Always originates from the host center instead of the pointer position. |
[base-ripple] | rippleDisabled | boolean | false | Disables ripple creation while leaving the directive attached. |
[base-ripple] | rippleDuration | number | DEFAULT_DURATION | Animation duration in milliseconds. |
Content