Liquid glass button

Installation

$ npx shadcn@latest add https://goodui.dev/r/liquid-glass-button.json

The file lands in components/goodui/liquid-glass-button.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/liquid-glass-button works too.

Usage

import { CalendarDays, LayoutList, Map } from "lucide-react"
import { LiquidGlassToolbar, LiquidGlassToolbarItem } from "@/components/goodui/liquid-glass-button"

export function ViewSwitcher({ view, onViewChange }: { view: string; onViewChange: (v: string) => void }) {
  return (
    <LiquidGlassToolbar value={view} onValueChange={onViewChange} aria-label="Bookings view">
      <LiquidGlassToolbarItem value="list" compact>
        <LayoutList />
        <span>List</span>
      </LiquidGlassToolbarItem>
      <LiquidGlassToolbarItem value="calendar" compact>
        <CalendarDays />
        <span>Calendar</span>
      </LiquidGlassToolbarItem>
      <LiquidGlassToolbarItem value="map" compact>
        <Map />
        <span>Map</span>
      </LiquidGlassToolbarItem>
    </LiquidGlassToolbar>
  )
}

When to use

Examples

<div className="relative h-64 overflow-hidden rounded-2xl bg-[url(/salon.jpg)] bg-cover">
  <LiquidGlassButton size="lg" className="absolute start-4 bottom-4">
    Book this stylist
  </LiquidGlassButton>
</div>

<LiquidGlassButton tone="dark" size="icon" aria-label="Share">
  <Share2 />
</LiquidGlassButton>

API reference

Accessibility

• •LiquidGlassToolbar has role="toolbar" and aria-orientation="horizontal"; give it an aria-label.
• •Toolbar items are <button>s with aria-pressed showing the selected one.
• •Text is white with a soft shadow; on very light backdrops check legibility, or use fallback, which (in the light tone) puts dark text on a near-opaque white tint.
• •Browsers without backdrop-filter automatically get the solid fallback tint.

Motion

• •Button: hover scales to 1.03, press to 0.95, on a spring (stiffness 500, damping 26).
• •A specular highlight follows the pointer through CSS variables and brightens on hover over 0.35 s.
• •Toolbar: the selected lens glides between items with a shared layout animation (spring, stiffness 420, damping 32).
• •Reduced motion: no hover or press scale, the lens jumps instead of gliding, and the highlight changes without a transition.

• •The highlight writes CSS variables on pointer move, so it never re-renders React. backdrop-filter costs GPU time; avoid dozens of glass elements over video.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related