# EnvBadge - **Category:** Data Display (`data-display`) - **Slug:** `data-display/env-badge` - **Status:** stable - **Platforms:** web - **Import:** `import { EnvBadge } from "@protocore/pds";` - **Docs:** https://pds.protocore.io/components/data-display/env-badge > A solid deployment-environment stamp — dev/staging/prod — in mono uppercase, colour-coded per environment. ## When to use it EnvBadge is a specialised, high-salience marker for **deployment environment** — the one piece of context you want an operator to register before running anything destructive. It is intentionally *solid* (not a soft tint like Badge) so it reads as a persistent chrome stamp rather than a per-row status. Use **EnvBadge** for a single environment marker in a title bar or header. Use **EnvStrip** when you want a full-width banner across the top of a non-production screen. Don't substitute a status **Badge** — environment isn't a `success`/`warning`/`danger` state, and the dedicated env colours (with `prod` deliberately loud) carry meaning a generic tone can't. ## Props | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `className` | `string` | no | — | — | | `env` | `enum` | no | — | Environment to display. Stamps `data-env` locally so the color resolves without a provider. When omitted, inherits an ancestor's `data-env`. | | `label` | `string` | no | — | Override the visible label (defaults to the uppercased environment name). | | `style` | `CSSProperties` | no | — | — | ## Examples ### Basics Pass `env` — `dev`, `staging`, or `prod`. The badge stamps `data-env` on itself, so the environment colour resolves even when no `PdsProvider` wraps it. ```tsx import { EnvBadge, Stack } from "@protocore/pds"; // Each environment stamps its own `data-env`, so the colour resolves without a // surrounding provider. The label defaults to the uppercased env name. export default function EnvBadgeBasics() { return ( ); } ``` ### In a screen title The primary use: a solid stamp beside a console title so operators always know which environment they're about to act in. Override the visible text with `label` (e.g. to add a region) without changing the environment colour. ```tsx import { EnvBadge, Stack, Text } from "@protocore/pds"; // An EnvBadge next to a screen title keeps operators oriented — a solid stamp // they read before acting on anything destructive. `label` overrides the text. export default function EnvBadgeInTitle() { return ( Ledger Console Ledger Console ); } ``` ## Usage **Do** - Place one EnvBadge in the console header so the current environment is always visible. - Rely on the built-in per-env colours; `prod` is loud on purpose. - Use `label` to append a region or shard while keeping the env colour intact. - Reach for EnvStrip instead when a whole screen needs a non-prod warning band. **Don't** - Don't recolour it to a status tone — environment is not success/warning/danger. - Don't scatter multiple EnvBadges through a page; one authoritative stamp is clearer. - Don't hand-build the label as free text where an `env` value exists — pass `env` so the colour follows. - Don't use it as a filter or button; it's a static marker. ## Accessibility **Notes** - EnvBadge renders a `` whose visible text (e.g. "PROD") states the environment — status never rides on colour alone. - The per-environment colours are chosen to meet contrast against their solid fill; the text label guarantees legibility for monochrome and colour-blind readers. - When the badge appears far from the title it labels, add an `aria-label` such as "Environment: production" for a fuller announcement. ## Related `badge`, `tag`, `role-chip`, `status-dot` --- © Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/