Feature Flag Toggle

Runtime toggle for enabling and disabling feature flags without redeployment.

Preview · Feature Flag Toggle

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:360px">
  <div class="card" style="padding:1rem">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.25rem">
      <span style="font-size:0.875rem;font-weight:500">beta-dashboard</span>
      <label><input type="checkbox" role="switch" checked /></label>
    </div>
    <p style="margin:0;font-size:0.75rem;color:var(--muted-foreground)">New dashboard layout for beta users</p>
  </div>
  <div class="card" style="padding:1rem">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.25rem">
      <span style="font-size:0.875rem;font-weight:500">ai-copilot-v2</span>
      <label><input type="checkbox" role="switch" /></label>
    </div>
    <p style="margin:0;font-size:0.75rem;color:var(--muted-foreground)">Experimental AI copilot version 2</p>
  </div>
</div>

React

import { PrimusFeatureToggle } from '@/components/ui/primus-feature-toggle';

const flags = [
  {
    id: 'beta-dashboard',
    name: 'beta-dashboard',
    description: 'New dashboard layout for beta users',
    enabled: true,
    environment: 'production',
  },
  {
    id: 'ai-copilot-v2',
    name: 'ai-copilot-v2',
    description: 'Experimental AI copilot version 2',
    enabled: false,
  },
];

<PrimusFeatureToggle
  flags={flags}
  onToggle={(flagId, enabled) => console.log(flagId, enabled)}
/>

Angular

<primus-feature-flag-toggle flagKey="beta-dashboard"
  [apiUrl]="'https://api.yourdomain.com'" (toggled)="onFlagToggled($event)">
</primus-feature-flag-toggle>

Props

Prop	Type	Default	Description
flags	FeatureFlag[]	required	Feature flags to display
onToggle	(flagId: string, enabled: boolean) => void	—	Called when a flag is toggled
readonly	boolean	false	Disable toggling

TypeScript interfaces

interface FeatureFlag {
  id:           string;
  name:         string;
  description?: string;
  enabled:      boolean;
  environment?: string;
}

Version history

See the Changelog for version history and breaking changes.