Update Notification Modal

App update notification modal with toggle switch for preferences. Perfect for notification settings, feature updates, and user preferences.

Features

Toggle switch for notification preferences
Descriptive text explaining notifications
Learn more link for additional information
Save and cancel actions
Loading states during save
Form submission handling

Example

Notification Settings

Click the button below to open the notification preferences modal. Toggle notifications on or off and save your preferences.

Usage

import { UpdateNotificationModal } from '@/components/ui/templates/modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  
  const handleSubmit = (data: {
    notificationsEnabled: boolean
  }) => {
    console.log('Saving preferences:', data)
    setIsLoading(true)
    // Save to API
    setTimeout(() => {
      setIsLoading(false)
      setIsOpen(false)
    }, 1500)
  }
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Manage Notifications
      </Button>
      
      <UpdateNotificationModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onSubmit={handleSubmit}
        isLoading={isLoading}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
onSubmit	(data) => void	-	Callback with notification preferences
isLoading	boolean	false	Shows loading state on save button
title	string	'Update AI System Notifications'	Modal title text