/// Layout
EnvStrip
The persistent environment band — a sticky full-width dev/staging/prod chrome that colours itself from the env token layer.
import { EnvStrip } from "@protocore/pds";Basics
Pass an env and the strip stamps data-env locally, so --pds-color-env / --pds-color-env-fg resolve without any surrounding provider. Sticky is disabled here so it sits inline in the demo.
Environments
dev, staging, and prod each resolve their own colour from the [data-env] token layer — no per-environment branching in your code.
Loud form
Supplying a message grows the band into its loud form — for the high-stakes wayfinding you want when someone is pointed at production.
When to use it
EnvStrip is the single most important wayfinding element in an operator UI: a persistent, sticky band that makes the current environment impossible to miss. Mount one at the very top of any console that can target more than one environment — AppShell has a first-class env slot that renders it above the top bar. Use its loud message form for prod (and risky staging) so intent is unmistakable. It is the page-level chrome; for the inline, in-context stamp of an environment (in a table cell, next to a resource name) use EnvBadge, which shares the same env token layer.
Usage
Do
- Mount one EnvStrip at the top of any multi-environment console.
- Use the loud message form for prod so the stakes read at a glance.
- Let AppShell's env slot place it above the top bar.
Don't
- Use EnvStrip inline inside a table or next to a name — that is EnvBadge.
- Hardcode colours per environment; the [data-env] token layer resolves them.
- Show more than one EnvStrip on a page — it is singular page chrome.
Accessibility
- The band is a live region: `role="status"` with `aria-live="polite"`, so a change of environment is announced.
- Colour is reinforced by the always-present text label, so the environment is never conveyed by colour alone.
- The leading status dot is decorative (`aria-hidden`).
EnvStrip props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
dot | boolean | true | Show a leading status dot (pulses under motion). Default true. |
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 | ReactNode | — | The band label (defaults to the uppercased environment name). |
message | ReactNode | — | A longer wayfinding message shown on wider viewports (falls back to `label` on narrow screens). Its presence also grows the band. |
sticky | boolean | true | Pin to the top with sticky positioning at the sticky z-layer. Default true. |
style | CSSProperties | — |