Ripple Element

An element that provides the material-design ripple effect, for user interactions, within/on UI components.

The element operates in two modes:

  • With children (e.g., with a checkbox input), and
  • As an "empty" child element (within a button element, etc.).

Caveats

  • When the elements is used as an empty element, within an interactive element, the interactive element should contain a position value; E.g., position: relative; etc.
Non-interactive element with empty ripple element

With position: relative;:

Interactive element with empty ripple element
Ripple with child element