Modals

Dialog overlays for focused interactions — confirmations, forms, scrollable content, and stacked dialogs.

Modal Sizes

Five size variants from compact to fullscreen.

Basic Modal

Standard modal with title, body text, and footer actions.

Confirmation Modal

Warning dialog for destructive or irreversible actions.

Form Modal

Modal containing form fields with validation-ready inputs.

Scrollable Modal

Long content that scrolls inside the modal body while header and footer stay fixed.

Vertically Centered Modal

Modal centered both horizontally and vertically in the viewport.

Modal with Grid

Grid layout inside modal body for structured content.

Static Backdrop Modal

Clicking the backdrop does not close this modal — only the buttons do.

Stacked Modals

Opening a second modal from within the first modal.