FeatureFlagToggle

Operator-style toggle for a feature flag — name, description, environment, variant, and rollout slot.

#Default usage

<FeatureFlagToggle
  title="Use new checkout"
  flagName="checkout.v2"
  description="Roll out the redesigned checkout flow."
  environment="production"
  rolloutPercent={42}
  variant="experimental"
/>

#Import

import { FeatureFlagToggle, type FeatureFlagVariant } from "@froggdesign/enter-ui-react";

#Accessibility

The toggle is a real Switch with an aria-label derived from title / flagName. Variant chip is rendered with the correct Badge tone and stays visible in addition to color cue.

#API

• title, description, flagName: copy slots.
• checked / defaultChecked + onCheckedChange: controlled or uncontrolled.
• variant: "stable" | "beta" | "experimental" | "deprecated" — drives the variant chip tone.
• environment: optional EnvironmentBadge slot.
• rolloutPercent, rollout: compact percent indicator and an extra rollout slot for sliders / percent labels.
• loading, disabled: standard ops states.

#Styling

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