Ripple
The ripple is the state layer Material 3 puts under a press: hover, focus and a wave that follows the pointer. Every interactive component here already carries one, and this page is for putting the same feedback on a surface of your own.
Usage
Copy code
<script lang="ts">
import { Ripple } from 'noph-ui'
</script>
<div class="ripple-container">
<Ripple />
</div>
<style>
.ripple-container {
position: relative;
overflow: hidden;
height: 2.5rem;
width: 7rem;
border-width: 1px;
border-radius: 0.25rem;
border-style: solid;
border-color: currentColor;
}
</style>
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.1 |
--np-ripple-focus-opacity | 0.1 |
Example
Copy code
<script lang="ts">
import { Ripple } from 'noph-ui'
</script>
<div class="ripple-container theming-example">
<Ripple />
</div>
<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: 1px;
border-radius: 0.25rem;
border-style: solid;
border-color: currentColor;
}
</style>
Accessibility
The ripple is decoration. It renders aria-hidden and takes no pointer events, so it stays
out of the accessibility tree and never swallows a click meant for the control underneath.
It follows prefers-reduced-motion and stops animating for anyone who asks for less movement.
Because it only draws a state layer, the element you put it on still has to be a real control, with
a role, a name and a focus ring of its own.
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. |
forElement | HTMLElement | undefined | undefined | Element the ripple listens on, instead of its own parent. Use it when the touch target is larger than the surface the ripple is drawn on. |
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. |