The glass swells while pressed. The component accepts standard button events and attributes.
Installation
$pnpm dlx shadcn@latest add https://your-docs-domain.com/r/liquid-button.json
Usage
"use client"
import { useState } from "react"
import { LiquidButton } from "@/components/ui/liquid-button"
export default function Demo() {
const [count, setCount] = useState(0)
return (
<LiquidButton size="lg" onClick={() => setCount(count + 1)}>
{count ? `Pressed ${count} times` : "Press the glass"}
</LiquidButton>
)
}
API
| Property | Type | Description |
|---|
size? | keyof typeof sizes | The size option. |
tinted? | boolean | tints the glass with the glow color, for the primary action |
children? | React.ReactNode | The children option. |
Standard element attributes are supported where the props extend a React element type. Required properties appear without a question mark.
Dependencies
motion
Shared local files are included in the Code panel. See project setup for Tailwind, path aliases, and theme tokens.