GlassButton

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.

What you provide: everything Button 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.

Facts#

Group	Actions
Product	Crew OS
Global	window.DigitalCrew.GlassButton
Source	digitalcrew-orchestrator: components/ui/glass-button.tsx
Import in the app	import { GlassButton } from "@/components/ui/glass-button";

API#

TypeScript declarations emitted from components/ui/glass-button.tsx.

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

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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#