Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Ripple
Animated decoration used by Button, Chip, and many more. In term of user experience, Ripple effect provides feedback after click, that can improve sense of responsiveness.
Example
Basic Usage
Hover me
View code
Radius and Color
By default, Ripple fill up spaces by the parent using position: absolute, so your wrapping component must not have position: static.
You should also provide radius and color or colorType props to fit with your component correctly.
Round
Color
View code
API
Ripple
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| color | string | Set custom color. If this prop is specified, colorType will be ignored. | |
| colorType | ColorTypes | accPri1st | Set color based on theme. If color is specified, that prop is used instead of this. |
| intensity | number | 0.15 | Opacity of the ripple. |
| radius | string | number | Equivalent to CSS border-radius property. | |
| transitionProps | { onChange?: ((result: AnimationResult<SpringValue<UnknownProps>>, ctrl: Controller<UnknownProps>, item: QueueItem<...>) => void) | { ...; }; ... 25 more ...; onDestroyed?: (item: QueueItem<...>, key: Key) => void; } | Props for the transition config |