Signature / Atomstable

Liquid Button

Button with fluid hover lift, press squish, and radial shine effect.

@glinui/uiComponent: liquid-button

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add liquid-button

Usage$

LiquidButton extends Button with stronger transform and brightness motion — intended for premium call-to-action moments. It supports all Button props and adds an intensity prop to control the effect level.

Basic$

TSX

1import { LiquidButton } from "@glinui/ui"
2
3export function LiquidButtonDemo() {
4return <LiquidButton variant="liquid">Start Free Trial</LiquidButton>
5}

Examples$

Intensity Variants$

The intensity prop controls how pronounced the hover lift, press squish, and radial shine effects are.

TSX

1import { LiquidButton } from "@glinui/ui"
2
3export function LiquidButtonIntensityDemo() {
4return (
5  <div className="flex flex-wrap gap-3">
6    <LiquidButton variant="liquid" intensity="soft">Soft</LiquidButton>
7    <LiquidButton variant="liquid" intensity="strong">Strong</LiquidButton>
8  </div>
9)
10}

Combined with Button Variants$

LiquidButton accepts all inherited Button variant and size props, making it composable with any variant in the design system.

TSX

1import { LiquidButton } from "@glinui/ui"
2
3export function LiquidButtonVariantsDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-3">
6    <LiquidButton variant="default" intensity="soft" size="sm">Default / Soft / SM</LiquidButton>
7    <LiquidButton variant="liquid" intensity="soft" size="md">Liquid / Soft / MD</LiquidButton>
8    <LiquidButton variant="liquid" intensity="strong" size="lg">Liquid / Strong / LG</LiquidButton>
9    <LiquidButton variant="glass" intensity="soft" size="md">Glass / Soft / MD</LiquidButton>
10  </div>
11)
12}

Accessibility$

Inherits native <button> semantics and full keyboard interaction from Button.
The radial shine is a decorative ::after pseudo-element and is invisible to assistive technology.
Keep CTA labels descriptive — avoid generic text like "Click here".

Reduced Motion$

transform and filter transitions used for hover lift, press squish, and shine fade are all disabled when prefers-reduced-motion is active.

API Reference$

Prop	Type	Required	Default	Description
`intensity`	`"soft" \| "strong"`	No	`"soft"`	Variant option from liquidButtonVariants.

Source$

TSX

1import { LiquidButton } from "@glinui/ui"

packages/ui/src/components/liquid-button.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/liquid-button.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

LiquidButtonProps

`LiquidButtonProps`

Prop	Type	Required	Default	Description
`intensity`	`"soft" \| "strong"`	No	`"soft"`	Variant option from liquidButtonVariants.