# Glass button (goodtabs UI)

A real button on a pill of glass, in the three DESIGN.md control heights.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/glass-button.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/glass-button`

## Usage

```tsx
import { GlassButton } from "@/components/ui/glass-button"

<GlassButton onClick={start}>Get started</GlassButton>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| size | `"sm" | "default" | "lg"` | `"default"` | 28px, 32px or 44px tall. All are pills. |
| ...props | `ComponentProps<"button">` |  | Everything a button takes. |

## When to use

- A call to action over a hero image
- A secondary action beside a solid primary

## When not to use

- As the only primary action on a flat page
- Inside forms on plain backgrounds

## Notes for agents

- The glass is a wrapper and the button inside is the focusable element; the ring draws on the wrapper
- Radius is half the height: 14, 16 and 22
- Glass needs something behind it: it bends and frosts what sits under it, so on a flat background it reads as a grey box
- Hover raises the fill from 60 to 75 percent over 100ms

## The maths

- Pill radius r = h / 2, so 28, 32 and 44px give 14, 16 and 22.

Docs: https://ui.goodtabs.co/components/glass-button