Ripple

Ripples are visual representations used to communicate the status of a component or interactive element.

Installation

We use @material/ripple for Ripple effects, which can be used from a CDN or installed using a package manager.

<!-- MDC Ripple JS -->
<script src="https://cdn.jsdelivr.net/npm/@material/ripple@14.0.0/dist/mdc.ripple.min.js"
        integrity="sha384-9QANVmWxL3S8VRs8x1Q+bF1Zzogpy7P/Qw1+y5qHLdC1ig0EuoHg9VbB1SXyecdZ"
        crossorigin="anonymous"></script>

npm i @material/ripple@14.0.0

Add Ripple effect

To add Ripple to your component:

Add Ripple surface (<span class="ripple-surface"></span>) to your component.
Set the position of your component to either relative, absolute, fixed, or sticky (In other words, anything except static), since a Ripple surface is absolute positioned.
Initialize the Ripple surface with Javascript to get the Ripple effect.

This component requires Javascript for initialization. Click to view Javascript.

On Buttons

CODE

html

<button type="button" class="btn btn-primary m-1">
  Primary
  <span class="ripple-surface"></span>
</button>

html

<button type="button" class="btn btn-tertiary m-1">
  Tertiary
  <span class="ripple-surface"></span>
</button>

html

<button type="button" class="btn btn-outline-success m-1">
  Outlined Button
  <span class="ripple-surface"></span>
</button>

html

<button type="button" class="btn btn-outline-danger border-0 m-1">
  Text Button
  <span class="ripple-surface"></span>
</button>

On Tabs

Apple

Apricot

Avocado

CODE

html

<ul class="nav nav-tabs nav-justified primary-indigo base-pink" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#apple">
      Apple
      <span class="ripple-surface"></span>
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="tab" role="tab" data-bs-target="#apricot">
      Apricot
      <span class="ripple-surface"></span>
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="tab" role="tab" data-bs-target="#avocado">
      Avocado
      <span class="ripple-surface"></span>
    </button>
  </li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
  <div class="tab-pane container-fluid fade" role="tabpanel" id="apple">Apple</div>
  <div class="tab-pane container-fluid active" role="tabpanel" id="apricot">Apricot</div>
  <div class="tab-pane container-fluid fade" role="tabpanel" id="avocado">Avocado</div>
</div>

On a div

Ripple on a div

CODE

html

<div class="text-bg-success p-4 position-relative">
  Ripple on a div
  <span class="ripple-surface"></span>
</div>

Color

Use the custom property --mdc-ripple-color to set the color of the Ripple.

Ripple with custom color

CODE

html

<div class="border p-4 position-relative" style="--mdc-ripple-color: blue;">
  Ripple with custom color
  <span class="ripple-surface"></span>
</div>

Color levels

Use the custom properties:

--mdc-ripple-hover-opacity to set hover color opacity.
--mdc-ripple-focus-opacity to set focus color opacity.
--mdc-ripple-press-opacity to set active color opacity.

Ripple with custom color levels

CODE

html

<div class="border p-4 position-relative" 
     style="--mdc-ripple-color: blue; --mdc-ripple-hover-opacity: .3; --mdc-ripple-focus-opacity: .4; --mdc-ripple-press-opacity: .5;">
  Ripple with custom color levels
  <span class="ripple-surface"></span>
</div>

Javascript

If CDN is used to add @material/ripple to the project

// Initialize Ripple
const rippleSurface = Array.prototype.slice.call(document.querySelectorAll('.ripple-surface'))
rippleSurface.map(s => {
  return new mdc.ripple.MDCRipple(s)
})

Else

// Import MDCRipple
import { MDCRipple } from '@material/ripple';

// Initialize Ripple
const rippleSurface = Array.prototype.slice.call(document.querySelectorAll('.ripple-surface'))
rippleSurface.map(s => {
  return new MDCRipple(s)
})

Theme Builder

Personalize Material Style to reflect your product's brand identity.

CONTENTS