← Back to Components

Modal

A flexible modal dialog component with accessibility features and customizable content for interrupting user workflows

Basic Modal Usage

Simple Modal

Basic modal with heading, description, and custom content

Modal with Form Content

Form Integration

Modal containing Form component with various input types and validation

Modal Variants

Modal with Action Buttons

Modal with primary and secondary action buttons in footer

Scrollable Content Modal

Modal with content that exceeds viewport height, demonstrating scroll behavior

Real-World Examples

Confirmation Modal

Destructive action confirmation with warning styling and clear messaging