Skip to content
On this page

Ripple

Material Web catalog**

Ripples are state layers used to communicate the status of a component or interactive element.

A state layer is a semi-transparent covering on an element that indicates its state. A layer can be applied to an entire element or in a circular shape.

Usage

Ripples display on hover and press pointer interactions. They may be attached to a control in one of three ways.

A container that displays a bounded ripple on interaction.

  1. Attached to the parent element

    html
    <style>
      .container {
        position: relative;
      }
    </style>
    <button class="container">
      <md-ripple></md-ripple>
    </button>
  2. Attached to a referenced element

    html
    <style>
      .container {
        position: relative;
      }
    </style>
    <div class="container">
      <md-ripple for="control"></md-ripple>
      <input id="control">
    </div>
  3. Attached imperatively

    html
    <style>
      .container {
        position: relative;
      }
    </style>
    <div class="container">
      <md-ripple id="ripple"></md-ripple>
      <button id="ripple-control"></button>
    </div>
    <script>
      const ripple = document.querySelector('#ripple');
      const control = document.querySelector('#ripple-control');
      ripple.attach(control);
    </script>

Note: ripples must be placed within a position: relative container.

Unbounded

To create an unbounded circular ripple centered on an element, use the following styles.

css
.container {
  display: flex;
  place-content: center;
  place-items: center;
  position: relative;
}

md-ripple.unbounded {
  border-radius: 50%;
  inset: unset;
  height: var(--state-layer-size);
  width: var(--state-layer-size);
}

A circular container with an inner circle that displays an unbounded ripple around it on interaction.

html
<style>
  .container {
    border-radius: 50%;
    height: 32px;
    width: 32px;

    /* Needed for unbounded ripple */
    display: flex;
    place-content: center;
    place-items: center;
    position: relative;
  }

  md-ripple.unbounded {
    /* Needed for unbounded ripple */
    border-radius: 50%;
    inset: unset;
    height: 64px;
    width: 64px;
  }
</style>
<button class="container">
  <md-ripple class="unbounded"></md-ripple>
</button>

Accessibility

Ripples are visual components and do not have assistive technology requirements.

Theming

Ripples support Material theming and can be customized in terms of color.

Tokens

TokenDefault value
--md-ripple-hover-color--md-sys-color-on-surface
--md-ripple-pressed-color--md-sys-color-on-surface

Example

Image of a ripple with a different theme applied

html
<style>
:root {
  --md-sys-color-primary: #006A6A;
  --md-ripple-hover-color: var(--md-sys-color-primary);
  --md-ripple-pressed-color: var(--md-sys-color-primary);
}

.container {
  position: relative;
}
</style>
<button class="container">
  <md-ripple></md-ripple>
</button>

API

MdRipple <md-ripple>

Properties

PropertyAttributeTypeDefaultDescription
disableddisabledbooleanfalseDisables the ripple.
htmlForstringundefined
controlHTMLElementundefined

Methods

MethodParametersReturnsDescription
attachcontrolvoid
detachNonevoid
Ripple has loaded