# Environment badge

Tells staff which copy of the admin they are in: STAGING in ochre, PRODUCTION and LOCAL in slate. Sits in the top bar, right, before the help trigger.

- **Group:** Status and feedback · **family:** `status-feedback` · **shadcn:** Badge
- **Build:** shadcn `Badge` variant `env`.
- **In apps/admin today:** Badge exists; env variants are new.
- **Client component:** no. 

## Content rules

- One word: STAGING, PRODUCTION, LOCAL.

## Do

- Show on every page of every environment.

## Don't

- Green for production.
- Hide it on phone: it sits in the phone bar.

## Accessibility

- **ARIA:** Plain text; screen readers read "Staging". Add `title` with the host name.
- **Keyboard:** Not focusable.
- **Focus:** None.

## Tokens

`--w-semibold` `--text-10-5` `--font-ui` `--warning` `--r-control` `--neutral` `--s-3` `--s-5` `--text-small` `--font-voice` `--font-stretch-title` `--s-6` `--s-2` `--w-medium` `--text-micro` `--font-code` `--muted-foreground`

## Files

`environment-badge.html` live specimen · `environment-badge.css` kit rules · `environment-badge.d.ts` props · full page: `docs/components/environment-badge/` (phone: `m/`).