Ripple

Usage

Click inside the container to see the ripple effect: 
<style>
	.ripple-container {
		position: relative;
		overflow: hidden;
		height: 2.5rem;
		width: 7rem;
		border-width: 2px;
		border-style: solid;
		border-color: currentColor;
	}
</style>
<div class="ripple-container">
	<Ripple />
</div>

Theming

Tokens

TokenDefault value
--np-ripple-hover-color--np-color-on-surface
--np-ripple-hover-opacity0.08
--np-ripple-pressed-color--np-color-on-surface
--np-ripple-pressed-opacity0.12

Example

<style>
	.theming-example {
		--np-ripple-hover-color: var(--np-color-primary);
		--np-ripple-pressed-color: var(--np-color-primary);
	}
	.ripple-container {
		position: relative;
		overflow: hidden;
		height: 2.5rem;
		width: 7rem;
		border-width: 2px;
		border-style: solid;
		border-color: currentColor;
	}
</style>
<div class="ripple-container theming-example">
	<Ripple />
</div>

API

Attributes

AttributeTypeDefaultDescription
forceHoverbooleanfalseWhen set to true, applies the hover effect programmatically, regardless of whether the user is actively hovering over the element. When false, the hover effect is only applied through actual user interaction.

Bindables

AttributeTypeDescription
elementHTMLElementA reference to the root DOM element of the component. This variable is bound using bind:this, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.