Error Modal

Error display modal with helpful messages and recovery options. Perfect for API errors, validation failures, and system issues.

Features

Clear error messaging with error codes
Optional retry functionality
Customizable error title and description
Support for error codes and details
Accessible error announcements
Consistent error color scheme

Examples

Basic Error

Error with Retry

Usage

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

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  
  const handleError = () => {
    setIsOpen(true)
  }
  
  return (
    <>
      <Button onClick={handleError}>
        Trigger Error
      </Button>
      
      <ErrorModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onRetry={() => {
          console.log('Retrying...')
          setIsOpen(false)
        }}
        title="Something went wrong"
        description="We encountered an error while processing your request. Please try again."
        errorCode="ERR_001"
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
onRetry	() => void	-	Optional callback for retry action
title	string	-	Error title text
description	string	-	Error description text
errorCode	string	-	Optional error code for debugging