# Glass badge (goodtabs UI)

A small label on glass for use over images, at the standard badge size.

## Install

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

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

## Usage

```tsx
import { GlassBadge } from "@/components/ui/glass-badge"

<GlassBadge>New</GlassBadge>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| className | `string` |  | Position it with absolute classes or in a flex row. Size is fixed at 20px tall. |

## When to use

- A status or count on a thumbnail or hero image
- Where a solid badge would hide too much of the picture

## When not to use

- On flat backgrounds: use the plain badge
- As the only carrier of meaning, since the fill is only 65 percent

## Notes for agents

- Sized as the DESIGN.md badge: h-5, px-1.5, rounded-sm, text-xs. Radius 4 matches rounded-sm only while --radius is 0.75rem
- It renders a div, so keep it out of paragraphs and put it in a flex row or an absolutely positioned wrapper
- At this size the bent rim is 4px, so the effect is mostly frost; that is intended

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