EnvSelect
Environment picker with a status dot, for use as a topbar dropdown trigger.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone | StatusTone | — | "ok" | "warn" | "err" | "idle" | "prov" | "dim". Drives the status dot color. |
children | ReactNode | — | Environment name label. |
Usage
EnvSelect renders a compact trigger button with a StatusDot before the environment name, plus a chevron caret. It is designed for the topbar environment switcher. The tone prop sets the status dot color: production (green), staging (amber), or development (dim).
All tone variants
import { EnvSelect } from "@solarius/onset";
import type { StatusTone } from "@solarius/onset";
<EnvSelect tone="ok">Production</EnvSelect>
<EnvSelect tone="warn">Staging</EnvSelect>
<EnvSelect tone="err">Dev (broken)</EnvSelect>