Ripple
Provide expanding visual feedback around an interaction.
Preview
Import
import { Ripple } from "@sigil-ui/components";Usage
<Ripple />Props
| Prop | Type | Default | Description |
|---|---|---|---|
rings | number | 3 | Number of concentric rings. |
duration | number | 2.5 | Duration of each ring's expansion in seconds. |
color | string | var(--s-primary, currentColor) | Ring color. |
size | number | 200 | Maximum ring size. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |