Glass Button | Glassy UI

Preview

Release demos ready. Update 0.

Installation

First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:

Install Glass Button

pnpm dlx [email protected] add @glassyui/glass-button

Direct registry declarations

These values belong to @glassyui/glass-button itself in registry.json.

Package dependencies

clsx

Registry dependencies

@glassyui/glass-provider

File targets

components/glassyui/glass-button.tsx
components/glassyui/lib/merge-refs.ts
components/glassyui/lib/use-local-light.ts

Complete installed closure

This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.

Package dependencies

clsx

Installed files

components/glassyui/glass-button.tsx
components/glassyui/lib/merge-refs.ts
components/glassyui/lib/use-local-light.ts
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

import { GlassButton } from "@/components/glassyui/glass-button";

export function ButtonDemo() {
  return <GlassButton>Save changes</GlassButton>;
}

Examples

Variants

<div className="flex gap-3">
  <GlassButton variant="primary">Primary</GlassButton>
  <GlassButton variant="soft">Soft</GlassButton>
  <GlassButton variant="ghost">Ghost</GlassButton>
</div>

API

GlassButton

Forward-ref native button with owned glass interaction state.

GlassButtonProps

Native button props plus Glassy UI interaction and material options.

ButtonVariant

Exported primary, soft, or ghost visual-intent type.

ButtonSize

Exported sm, md, or lg size type.

variant

Visual intent: primary, soft, or ghost.

size

Control size: sm, md, or lg.

preset

Material preset applied to the button surface.

interactive

Disables pointer lighting when set to false.

Notes

Accessibility

Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.

Performance

Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.