Signature / Atom

Liquid Button

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

Edit on GitHub

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

Storage almost full

You have used 18.6 GB of your 20 GB plan.

Installation$

Install from

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

Prefer the package?

Usage$

LiquidButton extends Button. The default is a crisp glinr surface; on hover or focus an accent liquid fill rises through it. The fill is an accent mix (override with the --liquid-fill custom property), so it reads on light and dark scopes. It accepts every Button prop and adds intensity.

Examples$

Variants$

Every variant of the shared vocabulary works, and the motion effect adapts to the surface colour. Omit variant for the ambient default (glinr).

import { LiquidButton } from "@glinui/ui"


export function LiquidButtonVariantsDemo() {
return (
  <div className="flex flex-wrap items-center gap-3">
    <LiquidButton variant="glinr">glinr</LiquidButton>
    <LiquidButton variant="solid">solid</LiquidButton>
    <LiquidButton variant="plain">plain</LiquidButton>
    <LiquidButton variant="soft">soft</LiquidButton>
    <LiquidButton variant="outline">outline</LiquidButton>
    <LiquidButton variant="ghost">ghost</LiquidButton>
    <LiquidButton variant="gradient">gradient</LiquidButton>
  </div>
)
}

Glass (opt-in)$

glass is never the default. It needs a colorful or photographic backdrop to read, so place it over imagery or inside a ThemeScope with a backdrop.

import { LiquidButton } from "@glinui/ui"


export function LiquidButtonGlassDemo() {
return (
  <LiquidButton variant="glass">Glass</LiquidButton>
)
}

Intensity$

import { LiquidButton } from "@glinui/ui"


export function LiquidButtonIntensityDemo() {
return (
  <div className="flex flex-wrap gap-3">
    <LiquidButton intensity="soft">Soft</LiquidButton>
    <LiquidButton intensity="strong">Strong</LiquidButton>
  </div>
)
}

import { LiquidButton } from "@glinui/ui"


export function LiquidButtonSizesDemo() {
return (
  <div className="flex flex-wrap items-center gap-3">
    <LiquidButton size="sm">SM</LiquidButton>
    <LiquidButton size="md">MD</LiquidButton>
    <LiquidButton size="lg">LG</LiquidButton>
  </div>
)
}

Accessibility$

Renders through Button: native <button>, 2px accent focus ring with offset, disabled and aria-busy states.
Accessible name comes from the label. Decorative effect layers are aria-hidden and pointer-events-none.

Reduced Motion$

Scale, brightness and the fill transition are disabled under prefers-reduced-motion and data-glin-motion="none".

API Reference$

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

Source$

import { 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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

LiquidButtonProps

`LiquidButtonProps`

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