Button Glass

Glassmorphic button with layered shadows, blur, and 3D press animation. Use for hero CTAs, marketing pages, and over-image overlays where a regular Button feels flat.

Default

Primary glass button.

Usage

Import the parts you need from the component's folder.

import { ButtonGlass } from "@/components/ui/button-glass";

Variants

default, outline, ghost, white, black variants.

Sizes

sm, md (default), lg, xl with matching rounded shapes.

Rounded shapes

Adjust corner radius from sharp (none) to fully pill (full).

API Reference

ButtonGlass

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "ghost" \| "white" \| "black" \| "white-ghost" \| "black-ghost" \| "link"`	`"default"`	Visual style.
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "icon"`	`"md"`	Height and padding.
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "full"`	`"full"`	Corner radius.
`to`	`RouteLocationRaw`	—	When set, renders as NuxtLink. External URLs open in a new tab.
`as`	`string`	`"button"`	HTML element when to is empty.

Slot	Description
`default`	Button label and icons.

Button Copy Button Group