/// Data Display
EnvBadge
A solid deployment-environment stamp — dev/staging/prod — in mono uppercase, colour-coded per environment.
import { EnvBadge } from "@protocore/pds";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.
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.
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.
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
- EnvBadge renders a `<span>` 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.
EnvBadge props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
env | enum | — | Environment to display. Stamps `data-env` locally so the color resolves without a provider. When omitted, inherits an ancestor's `data-env`. |
label | string | — | Override the visible label (defaults to the uppercased environment name). |
style | CSSProperties | — |