Button

A glass button that swells and lights up under a press.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/button

Needs the @liquikit registry in your components.json. Set it up once.

import { Button } from "@/components/liquikit/button"

<Button variant="prominent">Continue</Button>

Pass icon for a square button that holds a single icon. Give it an aria-label.

tint colours a prominent button with any CSS colour.

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	—
`variant`	`"glass" \| "prominent" \| "clear"` `glass` is frosted glass, `prominent` fills with the accent, `clear` is glass with no body until pressed.	"glass"
`size`	`"small" \| "regular" \| "large"` Height and padding of the button.	"regular"
`icon`	`boolean` Makes the button square, for a single icon.	false
`block`	`boolean` Stretches the button to the width of its container.	false
`tint`	`string` Colour of the glass body. Accepts any CSS colour.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"

Also takes every prop of Base UI's button, plus className and style.