# GlassButton

> The Crew OS button with a frosted-glass finish: the same variants, sizes and `asChild` as `Button`, plus a backdrop blur and a soft highlight layer.

## Facts

- **Product**: Crew OS
- **Family**: Actions
- **Global**: `window.DigitalCrew.GlassButton`
- **Source**: `digitalcrew-orchestrator: components/ui/glass-button.tsx`
- **Import in the app**: `import { GlassButton } from "@/components/ui/glass-button";`
- **Live preview**: /design/components/glass-button/preview.html
- **Page**: /design/components/glass-button

## Guidelines

**Use it for** calls to action that sit on photos, video or dark gradients, such as the marketing CTA panel ("Contact our team"). On plain surfaces use [`Button`](/design/components/button.md).

**What you provide**: everything [`Button`](/design/components/button.md) takes: `variant` (`default`, `destructive`, `outline`, `secondary`, `ghost`, `link`), `size` (`default`, `sm`, `lg`, `icon`, `icon-sm`, `icon-lg`), `asChild` to render a link, plus `className`. The CTA section uses `size="lg"` with `!bg-black text-white hover:!bg-white/90`.

**Anatomy**: button sizes are 36px (`h-9 px-4`), `sm` 32px, `lg` 40px (`px-6`), icon sizes 36/32/40px square; `rounded-md`, `text-sm font-medium`, 8px gap, icons 16px. `.glass-button` adds `backdrop-filter: blur(12px) saturate(140%)`; its `::before` layer paints a 165° white gradient (18% to transparent at 48% to 4%) with inset highlights (1px top at 40% white, a 16% white hairline, 1px bottom at 16% black).

**Behaviour**: on hover the highlight fades to 80% over 180ms ease; with `prefers-reduced-motion` that transition is removed.

**Don't** stack glass buttons on busy imagery without a dark scrim, or use one for destructive actions.

## API

```ts
declare function GlassButton({ className, ...props }: React.ComponentProps<typeof Button>): any;
export { GlassButton };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h("div", { className: "flex flex-col items-center gap-4 rounded-xl bg-gradient-to-br from-neutral-600 to-neutral-800 p-8 text-center" },
      h("p", { className: "text-lg font-semibold text-white" }, "Still have questions?"),
      h("div", { className: "flex flex-wrap justify-center gap-3" },
        h(DC.GlassButton, { size: "lg", className: "!bg-black text-white hover:!bg-white/90 shadow-lg" }, "Contact our team"),
        h(DC.GlassButton, { size: "lg", variant: "outline", className: "border-white/30 bg-white/10 text-white hover:bg-white/20 dark:bg-white/10" }, h(I.Calendar), "Book a demo"),
        h(DC.GlassButton, { size: "icon-lg", variant: "secondary", "aria-label": "Chat with Camille" }, h(I.MessageSquare))));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Actions

- [Badge](/design/components/badge.md): A small pill label: count, channel, state or tag (Max's `components/ui/badge.tsx`).
- [Button](/design/components/button.md): The action control for both products: filled with `primary` by default, in six variants and six sizes (Max's `components/ui/button.tsx`).
- [Toggle](/design/components/toggle.md): A two-state button (Radix toggle) that stays pressed until clicked again.
- [ToggleGroup](/design/components/toggle-group.md): A segmented set of toggles (Radix toggle group) where one or several options are on at a time.