Information Modal

Information display modal with customizable content and icons. Perfect for displaying helpful information, tips, and guidance to users.

Features

Customizable icon with color options
Title and description support
Custom children content
Multiple size variants
Optional close button
Flexible content area

Examples

Basic Information

With Custom Content

Warning Style

Usage

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

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Show Info
      </Button>
      
      <InformationModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Helpful Information"
        description="This is some helpful information for you."
        icon="InformationCircleIcon"
        iconColor="text-blue-500"
      >
        <div className="space-y-2">
          <p>Additional content can go here.</p>
          <ul className="list-disc list-inside">
            <li>Feature one</li>
            <li>Feature two</li>
          </ul>
        </div>
      </InformationModal>
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
title	string	-	Modal title text
description	string	-	Optional modal description
icon	string	'InformationCircleIcon'	Icon name from Heroicons
iconColor	string	'text-blue-500'	Tailwind color class for icon
children	ReactNode	-	Custom content to display
size	'sm' \| 'md' \| 'lg' \| 'full'	'md'	Modal size variant