NotSimpleUIComponentsButtons
Liquid Button
A tactile liquid pill button featuring high-gloss specular shine, glass depth layers, and intense vibrant blue liquid lighting.
Preview
Size Variations
Installation
import { LiquidButton } from "@/components/buttons";
export default function Example() {
return <LiquidButton variant="primary">Get Started</LiquidButton>;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | "Get Started" | Button label or nested elements. |
variant | "primary" | "secondary" | "outline" | "primary" | Visual aesthetic variant. |
size | "sm" | "md" | "lg" | "md" | Button dimensions and typography sizing. |
className | string | "" | Additional Tailwind CSS classes. |
...props | React.ButtonHTMLAttributes<HTMLButtonElement> | — | Standard native HTML button attributes. |