Svelte Material Ripple

Svelte Material Ripple is a library for adding ripple effects to interactive elements.

Installation

npm install -D svelte-material-ripple

Usage

Import the Ripple component and place it in a position: relative container.

<script>
	import { Ripple } from "svelte-material-ripple";
</script>
 
<button class="relative">
	<Ripple />
</button>
 
<style>
	.relative {
		position: relative;
	}
</style>

By default, the ripple is attached to the parent element, but some elements like <input> don't accept children. You can attach the ripple to a reference element by passing the id of that element to the for prop.

<div class="parent">
	<input id="checkbox" type="checkbox" />
	<Ripple for="checkbox" class="ripple" />
</div>

You can also just pass the element directly to the for prop.

<script lang="ts">
	let input = $state<HTMLInputElement>();
</script>
 
<div class="parent">
	<input bind:this={input} type="checkbox" />
	<Ripple for={input} />
</div>

Checkbox Example

<div class="parent">
	<input id="checkbox" type="checkbox" />
	<Ripple for="checkbox" class="ripple" />
</div>
 
<style>
	.parent {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.ripple {
		inset: unset;
		height: 32px;
		width: 32px;
		border-radius: 9999px;
	}
</style>

Theming

Ripples can be customized globally using CSS variables.

TokenDescriptionDefault
--ripple-hover-colorThe color of the ripple when hoveredcurrentColor
--ripple-hover-opacityThe opacity of the ripple when hovered0.08
--ripple-pressed-colorThe color of the ripple when pressedcurrentColor
--ripple-pressed-opacityThe opacity of the ripple when pressed0.12

You can also pass a theme object to the component, which will override the global styles.

<Ripple
	theme={{
		hover: {
			color: "orange",
			opacity: 0.15,
		},
		pressed: {
			color: "red",
			opacity: 0.3,
		},
	}}
/>

Interactive Demo

<Ripple />