Feature Flag

A flag with its rollout percentage and targeting rules. The kill switch is a separate control from the rollout — during an incident, turning it off must be one action, not a slider drag.

src/components/ui/feature-flag.tsx

About

From the component's own source, where it was written.

A feature flag with its rollout percentage and targeting rules.

The kill switch and the rollout are separate controls on purpose. Turning a flag off has to be one unambiguous action during an incident — folding it into "set rollout to 0%" means the emergency path is a slider drag, and a slider is the wrong instrument when something is on fire.

The rollout bar is shown even at 100%, so "fully rolled out" and "off" are visually distinct states rather than both being an empty control.

Install

npx astralyx-ui add feature-flag

Usage

import { FeatureFlag } from '@/components/ui/feature-flag'

<FeatureFlag
  name="checkout.new_payment_flow"
  enabled={enabled}
  onEnabledChange={setEnabled}
  rollout={rollout}
  onRolloutChange={setRollout}
/>

Composer

Change the props and the source below follows.

checkout.new_payment_flowproductionOn

Routes checkout through the new payment provider.

Rollout25% of users

Targeting

plan = enterpriseAlways on
region = eu-west-1Excluded

Props

environment

targeting rules

tsx

<FeatureFlag
  name="checkout.new_payment_flow"
  enabled={enabled}
  onEnabledChange={setEnabled}
  rollout={rollout}
/>

Examples

Rollout

tsx

<FeatureFlag name="…" enabled={enabled} rollout={25} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`FeatureFlag`

A feature flag with its rollout percentage and targeting rules.

Extends Omit<ComponentProps<'div'>, 'onChange'>.

Prop	Type	Default	Description
name	string	required	—
description	ReactNode	—	—
enabled	boolean	required	The kill switch, deliberately independent of the rollout.
onEnabledChange	(enabled: boolean) => void	—	The kill switch, deliberately independent of the rollout.
rollout	number	—	0–100. Disabled while the flag is off; the bar is drawn even at 100% so "fully rolled out" and "off" are distinct states.
onRolloutChange	(rollout: number) => void	—	0–100. Disabled while the flag is off; the bar is drawn even at 100% so "fully rolled out" and "off" are distinct states.
rules	FlagRule[]	—	`{ id, condition, label, enabled? }` — targeting shown as data, not editable here.
environment	string	—	Badge on the header, since the same flag exists per environment.
rolloutLabel	ReactNode	'Rollout'	—
targetingLabel	ReactNode	'Targeting'	—

Types

`FlagRule`

Field	Type	Description
id	string	—
label	ReactNode	—
condition	string	e.g. "plan is enterprise"
enabled?	boolean	—