Feature flags settings

The FeatureFlagsSettings component provides an interface for managing feature flags with add, toggle, and delete functionality. It manages:

User access control (isEditingEnabled): if false, shows empty state and user is not provided with toggles.
What data? (featureFlags): the flags to display as toggles.
What happens on save? (onSave): callback receiving updated flags.
State indicators (isLoading, isSaving): optional user feedback on loading/saving states.
Styling (className): optional CSS class.

Import

import { FeatureFlagsSettings } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`isEditingEnabled`	`boolean`	none	Required: If `false`, shows empty state and other props have no effect
`featureFlags`	`Record<string, boolean>`	none	Required: Object mapping flag names to enabled/disabled state
`onSave`	function	none	Required: Callback when save is clicked
`isLoading`	`boolean`	`false`	Loading state
`isSaving`	`boolean`	`false`	Saving state
`className`	`string`	none	Additional CSS class

Data structure

The featureFlags prop accepts an object where:

Keys are flag names (arbitrary strings defined by your application)
Values are booleans (true = enabled, false = disabled)

{
  darkMode: true,
  betaFeatures: false,
  advancedMetrics: true,
}

This component renders toggles for whatever flags you pass in. Your application or backend determines the available flags.

Basic usage

Changes are held locally until the user clicks Save. The onSave callback receives the updated flags object:

const handleSave = async (updatedFlags: Record<string, boolean>) => {
  await api.saveFeatureFlags(updatedFlags)  // persist to backend
  setFlags(updatedFlags)                     // update local state
}

The component does not persist data, you must implement the save logic.

Example

import { FeatureFlagsSettings } from '@mdk/foundation'

function FeatureFlagsPage() {
  // Flags reflecting your API or app config
  const [flags, setFlags] = useState<Record<string, boolean>>({
    darkMode: true,
    betaFeatures: false,
    advancedMetrics: true,
  })
  const [isSaving, setIsSaving] = useState(false)

  const handleSave = async (updatedFlags: Record<string, boolean>) => {
    setIsSaving(true)
    await api.saveFeatureFlags(updatedFlags)
    setFlags(updatedFlags)
    setIsSaving(false)
  }

  return (
    <FeatureFlagsSettings
      featureFlags={flags}
      isEditingEnabled={true}
      isSaving={isSaving}
      onSave={handleSave}
    />
  )
}

Features

Add flags

Developers add new feature flags through the UI by entering comma-separated names. Flag names are arbitrary strings; the component does not validate against a predefined list.

Toggle flags

Each flag displays a toggle switch to enable/disable it. Changes are held locally until the end user clicks Save.

Delete flags

End user can click the trash icon next to any flag to remove it from the list.

Permission check

When isEditingEnabled is false, the component renders an empty state:

<FeatureFlagsSettings
  featureFlags={flags}
  isEditingEnabled={false}  // Shows "Update feature flags not enabled"
  onSave={handleSave}
/>

Feature flags are typically fetched from your backend API. This component provides the UI for viewing and editing them, it does not manage persistence. Use the onSave callback to sync changes back to your server.

Styling

The component uses the .mdk-settings-feature-flags CSS class. Key selectors:

.mdk-settings-feature-flags__add-row: Input and add button container
.mdk-settings-feature-flags__toggles: Grid of flag toggles
.mdk-settings-feature-flags__flag-item: Individual flag row
.mdk-settings-feature-flags__save: Save button container