Tailwind CSS Ripple

Use responsive ripple effect with helper examples for button ripple on click, waives effect on images, custom ripple color and duration. Easy to customize.

Basic example

The ripple effect is a way to let the user know that there has been a click interaction. You can easily add a ripple effect to the buttons component.

HTML
javascript

        
            
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Button
      </button>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Ripple });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Image

Using data-twe-ripple-init attribute you can also easily add the ripple effect to images.

HTML
javascript

        
            
      <a href="#!" data-twe-ripple-init>
        <img
          src="https://tecdn.b-cdn.net/img/new/standard/city/043.jpg"
          class="h-auto max-w-sm"
          alt="" />
      </a>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Ripple });

Colors

You can easily manipulate the color of the ripple effect to suit your needs. By using data-twe-ripple-color attribute you can change its color.

HTML
javascript

        
            
      <!-- Primary ripple color -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="primary"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Primary
      </button>

      <!-- Secondary ripple color -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="secondary"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Secondary
      </button>

      <!-- Success ripple color -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="success"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Success
      </button>

      <!-- Danger ripple color -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="danger"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Danger
      </button>

      <!-- Info ripple color -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="info"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Info
      </button>

      <!-- Light ripple color -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        class="inline-block rounded bg-neutral-800 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-50 shadow-dark-3 transition duration-150 ease-in-out hover:bg-neutral-700 hover:shadow-dark-2 focus:bg-neutral-700 focus:shadow-dark-2 focus:outline-none focus:ring-0 active:bg-neutral-900 active:shadow-dark-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Light
      </button>

      <!-- Dark ripple color -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="dark"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Dark
      </button>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Ripple });

HTML
javascript

        
            
      <!-- Red ripple color button -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="red"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Red
      </button>

      <!-- Green ripple color button -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="green"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Green
      </button>

      <!-- Primary ripple color button -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="primary"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        primary
      </button>

      <!-- Yellow ripple color button -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="yellow"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Yellow
      </button>

      <!-- Orange ripple color button -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="orange"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Orange
      </button>

      <!-- Purple ripple color button -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="purple"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Purple
      </button>

      <!-- Aqua ripple color button -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="aqua"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Aqua
      </button>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Ripple });

HTML
javascript

        
            
      <!-- Ripple color: #c953d6 -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="#c953d6"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        #c953d6
      </button>

      <!-- Ripple color: #44c6e3 -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="#44c6e3"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        #44c6e3
      </button>

      <!-- Ripple color: #fcc834 -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="#fcc834"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        #fcc834
      </button>

      <!-- Ripple color: #386f06 -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="#386f06"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        #386f06
      </button>

      <!-- Ripple color: #c1303a -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="#c1303a"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        #c1303a
      </button>

      <!-- Ripple color: #a57c3e -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="#a57c3e"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        #a57c3e
      </button>

      <!-- Ripple color: #192ced -->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="#192ced"
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        #192ced
      </button>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Ripple });

Duration

If you don't want the ripple effect to move on the button too quickly, use data-twe-ripple-duration attribute and modify the duration of the ripple.

HTML
javascript

        
            
      <!--Ripple duration: default-->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Default (500ms)
      </button>

      <!--Ripple duration: 1s-->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        data-twe-ripple-duration="1000ms"
        class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Duration 1s
      </button>

      <!--Ripple duration: 3s-->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        data-twe-ripple-duration="3s"
        class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Duration 3s
      </button>

      <!--Ripple duration: 5s-->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        data-twe-ripple-duration="5s"
        class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Duration 5s
      </button>

      <!--Ripple duration: 10s-->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        data-twe-ripple-duration="10s"
        class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Duration 10s
      </button>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Ripple });

Centered

If you add the attribute data-twe-ripple-centered="true", the ripple will always start at the center of the element, not at the affected location.

HTML
javascript

        
            
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        data-twe-ripple-centered="true"
        class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Button
      </button>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Ripple });

Unbound

If you use the data-twe-ripple-unbound="true" attribute, the ripple will not be bound to the element and will extend beyond its boundaries.

HTML
javascript

        
            
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-unbound="true"
        class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Button
      </button>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Ripple });

Radius

The data-twe-ripple-radius attribute can be used to modify the ripple radius. The numeric value is expressed in pixels, for example: data-twe-ripple-radius="10"

HTML
javascript

        
            
      <!--Ripple radius: default-->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        Default
      </button>

      <!--Ripple radius: 10-->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        data-twe-ripple-radius="10"
        class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        10
      </button>

      <!--Ripple radius: 25-->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        data-twe-ripple-radius="25"
        class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        25
      </button>

      <!--Ripple radius: 50-->
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        data-twe-ripple-radius="50"
        class="inline-block rounded bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        50
      </button>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Ripple });

Name	Type	Default	Description
`rippleCentered`	Boolean	`false`	Centers the position of ripple.
`rippleColor`	String	`""`	Changes color of ripple.
`rippleDuration`	String	`'500ms'`	Sets duration of animation
`rippleRadius`	Number	`0`	Sets radius value.
`rippleUnbound`	Boolean	`false`	Sets whether the effect should go beyond the wrapper's boundaries.

Name	Default	Description
`ripple`	relative overflow-hidden inline-block align-bottom	Sets styles connected with ripple effect position.
`rippleWave`	rounded-[50%] opacity-50 pointer-events-none absolute touch-none scale-0 transition-[transform,_opacity] ease-[cubic-bezier(0,0,0.15,1),_cubic-bezier(0,0,0.15,1)] z-[999]	Sets visual styles of the ripple effect.
`unbound`	overflow-visible	Sets overflow styles of unbound ripple effect.

Method	Description	Example
`dispose`	Manually dispose of component.	`myRipple.dispose()`
`getInstance`	Static method which allows you to get the alert instance associated to a DOM element.	`Ripple.getInstance()`
`getOrCreateInstance`	Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized.	`Ripple.getOrCreateInstance()`

Tailwind Ripple method

Basic example

Image

Colors

Duration

Centered

Unbound

Radius

Tailwind Ripple method - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Access restricted

To view this section you must have an active PRO account

Tailwind Ripple method

Tailwind CSS Ripple

Basic example

Image

Colors

Duration

Centered

Unbound

Radius

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Tailwind Ripple method - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods