Modal

Usage examples, variants, sizes, states, and best practices.

Basic Modal

Sizes

Variants

Scrollable Content

Close Options

Backdrop Options

Complex Example

openboolean

Default: false

Controlled open state of the modal

onClose() => void

Default: undefined

Callback when modal should close

Default: 'medium'

Modal width size

variant'default' | 'destructive' | 'warning' | 'success'

Default: 'default'

Visual style of the modal

titlestring

Default: undefined

Modal heading text

descriptionstring

Default: undefined

Modal description text under heading

footerReactNode

Default: undefined

Footer content (usually action buttons)

closeOnBackdropClickboolean

Default: true

Close modal when clicking backdrop

closeOnEscboolean

Default: true

Close modal when pressing ESC key

showCloseButtonboolean

Default: true

Show close button (X) in top-right

preventScrollboolean

Default: true

Lock body scroll while modal is open

initialFocusRefObject<HTMLElement>

Default: undefined

Element to focus when modal opens

zIndexnumber

Default: 3000

z-index of the modal overlay

Basic Modal

Sizes

Variants

With Footer

Scrollable Content

Close Options

Backdrop Options

Complex Example