Liquid Fill Button
NewPro
A button that fills with a rising, wavy liquid on hover. The label changes color exactly where the liquid covers it.
Customize
#ff784f
0.48
4px
1
When to use it
- Add to cart or buy button on a store or game page
- A hold, loading or claim action where a fill level makes sense
- A selected state in a pair of options, using the filled prop
Good to know
- Plan
- Pro
- Dependencies
- None beyond React
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 251
Installation
Liquid Fill Button is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy liquid-fill-button.tsx into components/ui.
Usage
import { LiquidFillButton } from "@/components/ui/liquid-fill-button";
<LiquidFillButton color="#ff784f" onClick={addToCart}>
Add to cart
</LiquidFillButton>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Button label. It is drawn twice, so avoid ids and interactive content inside. |
| color | string | "#ff784f" | Color of the liquid. |
| coveredColor | string | "#070606" | Color of the label where the liquid covers it. |
| rest | number | 0.48 | Liquid level at rest, from 0 (empty) to 1 (full). |
| fill | number | 1 | Liquid level on hover and keyboard focus, from 0 to 1. |
| filled | boolean | false | Holds the button at its fill level, for a selected or active state. |
| waveHeight | number | 4 | Height of the waves, in pixels. |
| speed | number | 1 | How fast the waves travel. 1 is the default pace. |
| className | string | — | Extra classes for the button. Every other button prop is passed through. |