Modal

A flexible dialog component with backdrop, focus trap, and keyboard support.

Basic Usage

This is a basic modal dialog with title and footer actions.

Danger Variant

Use the variant prop to change the modal's appearance for different contexts.

Are you sure you want to delete this item? This action cannot be undone.

Sizes

Features

  • Focus Trap - Keyboard focus is trapped within the modal
  • Escape Key - Press Escape to close (configurable)
  • Backdrop Click - Click outside to close (configurable)
  • Portal - Renders at document body level
  • Animations - Smooth enter/exit transitions
  • Accessibility - Proper ARIA attributes and roles

Props

PropTypeDefaultDescription
open booleanfalseControls modal visibility (bindable)
title string''Modal title text
size 'sm' | 'md' | 'lg' | 'xl' | 'full''md'Modal width
variant 'default' | 'danger' | 'warning' | 'success' | 'info''default'Color variant for icon container
closeOnBackdrop booleantrueClose when clicking backdrop
closeOnEscape booleantrueClose when pressing Escape
showClose booleantrueShow close button
children Snippet-Modal body content
footer Snippet-Footer actions (buttons)
icon Snippet-Custom icon in header
onclose function-Called when modal closes