Success Modal

Success confirmation modal with celebration and next steps. Perfect for completed actions, successful submissions, and positive feedback.

Features

Celebration icon and positive messaging
Customizable title and description
Optional continue action button
Auto-dismiss option
Accessible success announcements
Consistent green color scheme

Examples

Basic Success

Custom Message

Usage

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

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  
  const handleSuccess = () => {
    // Perform success action
    setIsOpen(true)
  }
  
  return (
    <>
      <Button onClick={handleSuccess}>
        Submit Form
      </Button>
      
      <SuccessModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onContinue={() => {
          console.log('Continuing...')
          setIsOpen(false)
        }}
        title="Success!"
        description="Your action has been completed successfully."
        continueText="Continue"
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
onContinue	() => void	-	Callback when continue button is clicked
title	string	-	Success title text
description	string	-	Success description text
continueText	string	'Continue'	Text for continue button