EnvironmentBadge

Compact environment chip — production / staging / preview / development / local / test.

#Default usage

<div className="docs-preview-row">
  <EnvironmentBadge dot environment="production" />
  <EnvironmentBadge environment="staging" />
  <EnvironmentBadge environment="preview" />
  <EnvironmentBadge environment="development" />
  <EnvironmentBadge environment="local" size="sm" />
  <EnvironmentBadge environment="test" size="sm" />
</div>

#Import

import { EnvironmentBadge, type EnvironmentBadgeKind } from "@froggdesign/enter-ui-react";

#Accessibility

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.

#API

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

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.