Docs / Components
SenseRippleDirective
Opt-in Material-style click ripple for interactive hosts from @artificialsenselabs/ui. Decorative only — not a default on every control. Hard-gated by prefers-reduced-motion.
Live demo: run nx serve showcase and open /components/ripple (port 4202).
Overview
Category: Display. Selector: [senseRipple]. Import: import { SenseRippleDirective } from '@artificialsenselabs/ui';
Accessibility
- Opt-in only: add
senseRipplewhere click feedback helps — do not put it on every interactive surface by default. - Waves are decorative (
aria-hidden), ignore pointer events, and are not announced. - JS and CSS both skip animation when
prefers-reduced-motion: reduceis set. - Set
disabledto suppress ripples without removing the directive.