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

Token	Default value
`--np-ripple-hover-color`	`--np-color-on-surface`
`--np-ripple-hover-opacity`	`0.08`
`--np-ripple-pressed-color`	`--np-color-on-surface`
`--np-ripple-pressed-opacity`	`0.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

Attribute	Type	Default	Description
`forceHover`	`boolean`	`false`	When 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

Attribute	Type	Description
`element`	`HTMLElement`	A 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.