<!-- Protocore Design System — EnvStrip -->
# EnvStrip

- **Category:** Layout (`layout`)
- **Slug:** `layout/env-strip`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { EnvStrip } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/layout/env-strip

> The persistent environment band — a sticky full-width dev/staging/prod chrome that colours itself from the env token layer.

## 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.

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `className` | `string` | no | — | — |
| `dot` | `boolean` | no | `true` | Show a leading status dot (pulses under motion). Default true. |
| `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` | `ReactNode` | no | — | The band label (defaults to the uppercased environment name). |
| `message` | `ReactNode` | no | — | A longer wayfinding message shown on wider viewports (falls back to `label` on narrow screens). Its presence also grows the band. |
| `sticky` | `boolean` | no | `true` | Pin to the top with sticky positioning at the sticky z-layer. Default true. |
| `style` | `CSSProperties` | no | — | — |

## Examples

### 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.

```tsx
import { EnvStrip } from "@protocore/pds";

export default function EnvStripBasics() {
  return <EnvStrip env="dev" sticky={false} />;
}
```

### Environments

`dev`, `staging`, and `prod` each resolve their own colour from the `[data-env]` token layer — no per-environment branching in your code.

```tsx
import { EnvStrip, Stack } from "@protocore/pds";

export default function EnvStripEnvironments() {
  return (
    <Stack gap={2}>
      <EnvStrip env="dev" sticky={false} />
      <EnvStrip env="staging" sticky={false} />
      <EnvStrip env="prod" sticky={false} />
    </Stack>
  );
}
```

## Do & don't

**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

**Notes**

- 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`).

## Related

`env-badge`, `app-shell`, `top-bar`, `banner`

---

© 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/