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
RippleButton
A thin layer wrapping BaseButton with Ripple which is triggered onRelease. This component is used in some other components including Button.
Consider this component as a utility rather than a finished component.
Click me
View code
API
RippleButton
| 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. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | string | number | Equivalent to CSS border-radius property. | |
| rippleDisabled | boolean | Whether to disable ripple animation. | |
| rippleIntensity | number | ||
| 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 |