Components
Glass Button
iOS-style liquid glass button — icon disc or text capsule with a gel press that squeezes and clears the tint while held.
Playground
Edit the props live and copy the config.
Variant
Tint
0.4
<GlassButton variant="capsule" tint={0.4}>
Continue
</GlassButton>Install
npx shadcn@latest add https://websiteglass.com/r/glass-button.jsonUsage
import { GlassButton } from '@/components/ui/glass-button';
// Icon button
<GlassButton aria-label="Notifications">
<BellIcon className="size-5" />
</GlassButton>
// Text capsule
<GlassButton variant="capsule">
Continue
</GlassButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "icon" | "capsule" | "icon" | icon = circular disc, capsule = horizontal pill. |
tint | number | 0.4 | Frosted glass tint 0–1. |
children | ReactNode | — | Icon or label content. |
All native <button> props are forwarded.
Interaction
On pointerdown the button squeezes to 92% scale and the tint clears to expose the frosted surface. On release it eases back to rest with a slight overshoot (the easeGel easing from glass-motion).
Glass
A liquid-glass lens engine — an SVG displacement filter run as a backdrop-filter physically bends the page through the lens. Exports Glass, GlassLens, and GlassSurface.
Glass Switch
iOS-style toggle — the thumb rests as a solid white platter and lifts into a glass lens on press, with spring travel and rubber-band overdrag.