Ripple

A ripple effect based on Material Design.

Ripple effects can be used to give more feedback to clickable areas.

Demo

Tap elements to trigger the ripple effect!

Heading

Text paragraph in one sentence displayed across two lines

Heading

Text paragraph in one sentence displayed across two lines

Components

  • ripple

    Wrapper component to set up ripple effects. Add content as children.

    [Insert slotted content]

    Attributes

    centredShould the ripple effect always emit from the center (true) or from the clicked position (default/false)

Style variables

--ripple-highlight-colorOverlay color when hovering the component. Set to "transparent" to disable hover effect.
--ripple-pressed-colorThe base color of the ripple effect itself.