Activate Features Modal

Modal for activating premium features with clear benefits and pricing. Supports both bulk activation and selective feature selection.

Features

Bulk or selective feature activation
Radio group for activation mode selection
Individual feature toggles for selective mode
Loading states during activation
Form validation and error handling
Accessible keyboard navigation

Example

Activate Advanced Features

Click the button below to see the activate features modal in action. You can choose to enable all features at once or select specific ones.

Usage

import { ActivateFeaturesModal } from '@/components/ui/templates/modal'
import type { Feature } from '@/components/ui/templates/modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  
  const handleSubmit = (data: {
    activationMode: 'all' | 'selective'
    features: Feature[]
  }) => {
    console.log('Activated features:', data)
    setIsOpen(false)
  }
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Activate Features
      </Button>
      
      <ActivateFeaturesModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onSubmit={handleSubmit}
        isLoading={false}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
onSubmit	(data) => void	-	Callback with activation mode and features
isLoading	boolean	false	Shows loading state on submit button
features	Feature[]	default features	Custom list of features to activate