Liquid Button
An animated button with a liquid fill effect that flows from bottom to top with a wavy surface and smooth color inversion on hover.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { ButtonWithLiquid } from '@/components/component-kit/items/button-with-liquid';
export function Example() { return ( <ButtonWithLiquid>Make it happen</ButtonWithLiquid> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | default | Pill height: 28, 32 or 36px. |
fill | "subtle" | "full" | full | The strength of the liquid fill effect. |