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 { FeatureFlagToggle } from 'primus-react-ui';

<FeatureFlagToggle flagKey="beta-dashboard" apiUrl="https://api.yourdomain.com"
  onToggled={(key, enabled) => console.log(key, 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
flagKey	string	required	Feature flag key
apiUrl	string	—	API URL

Version history

See the Changelog for version history and breaking changes.