Modal

A versatile modal component for displaying content in an overlay dialog.

The Modal component is a flexible and accessible dialog component that displays content in an overlay. It supports titles, descriptions, custom content, and various styling options while maintaining accessibility standards.

Import

import { Modal } from 'h2o-library';

Basic Usage

Basic Modal

Modal with Description

Modal with Custom Content

<Modal
  isOpen={true}
  onClose={() => {}}
  title="Custom Modal"
  description="This modal contains custom content and styling."
  className="custom-modal"
>
  <div className="space-y-4">
    <p>This modal contains custom content with multiple elements:</p>
    <ul className="list-disc pl-5">
      <li>Custom styling</li>
      <li>Multiple paragraphs</li>
      <li>Interactive elements</li>
    </ul>
    <div className="bg-gray-100 p-4 rounded-lg">
      <h4 className="font-semibold mb-2">Additional Information</h4>
      <p>This is a styled section within the modal content.</p>
    </div>
  </div>
</Modal>

Props

Prop	Type	Default	Description
`isOpen`	`boolean`	-	Whether the modal is open
`onClose`	`() => void`	-	Callback when the modal should close
`title`	`string`	-	The title of the modal
`description`	`string`	-	Optional description text
`children`	`React.ReactNode`	-	The content of the modal
`className`	`string`	-	Additional CSS classes for the modal

Design Considerations

Clear visual hierarchy with title and description
Consistent spacing and alignment
Visual feedback for interactions
Support for rich content and custom styling
Proper overlay and backdrop
Smooth animations for opening/closing
Responsive design for different screen sizes
Custom styling options for both container and content

Accessibility

Proper ARIA attributes for dialog role
Focus management (traps focus within modal)
Keyboard navigation support
Escape key to close
Click outside to close
Screen reader announcements
Proper heading structure
Focus restoration when closed
Proper contrast for all text elements
Clear visual indicators for interactive elements

Components