Ripple
The ripple is the Material 3 state layer for hover, focus and press, with a wave that follows the pointer. Every interactive component already has one. Use it to add the same feedback to your own surfaces.
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 does not block clicks on the control underneath.
It follows prefers-reduced-motion and stops animating when the user asks for less motion.
It only draws a state layer, so the element you put it on must be a real control with its own role,
name and focus ring.
API
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
forceHover | boolean | false | When true, shows the hover effect even if the pointer is not over the element.
When false, the hover effect shows only on real user hover. |
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 | The component's root DOM element, bound with bind:this. |