Modal
overlayFull-featured modal with backdrop blur, scale + fade entrance animation, and focus trap via Radix Dialog portal.
import { Modal } from '@/components/forge'Preview
Modal
Code Example
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
open | boolean | - | Yes | Controls modal visibility |
onOpenChange | (open: boolean) => void | - | No | Callback when modal open state changes |
title | string | - | No | Modal heading |
description | string | - | No | Subtext below the title |
children | React.ReactNode | - | No | Modal body content |
size | 'sm' | 'md' | 'lg' | 'md' | No | Max width of the modal |
Variants
smmdlg
Accessibility
- Uses Radix Dialog for focus trap and Escape key dismissal
- Title is bound to aria-labelledby on the dialog role element
- Backdrop click dismisses the modal
- Focus returns to trigger element on close