Compact environment chip — production / staging / preview / development / local / test.
Compact environment chip — production / staging / preview / development / local / test.
Use sm size in tables and md elsewhere.
<HStack gap={12} wrap>
<EnvironmentBadge dot environment="production" />
<EnvironmentBadge environment="staging" />
<EnvironmentBadge environment="preview" />
<EnvironmentBadge environment="development" />
<EnvironmentBadge environment="local" size="sm" />
<EnvironmentBadge environment="test" size="sm" />
</HStack>import { EnvironmentBadge, HStack, type EnvironmentBadgeKind } from "@froggdesign/enter-ui-react";The badge is a <span> with an explicit aria-label so screen readers announce the environment by name even when the dot indicator alone differentiates between two badges.
environment: required. One of production | staging | preview | development | local | test.label: override the visible label and aria-label.dot: render a leading dot indicator.size: sm (table density) or md (default).Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.