Modals
Modal Types
Click any card below to preview that modal variant.
Basic Modal
A simple modal with title, body text and two actions.
Centered Modal
Vertically centered in the viewport for short content.
Small Modal
Compact size for quick actions or short prompts.
Large Modal
Wider layout for two-column content or detail views.
Extra Large Modal
Near full-width — ideal for tables or dashboards.
Fullscreen Modal
Covers the entire viewport — great for mobile flows.
Scrollable Modal
Long content scrolls inside the body, header stays fixed.
Static Backdrop
Won't close on outside click — for required actions.
Delete Confirmation
Danger-styled confirmation before a destructive action.
Success Modal
Confirms a completed action with a single next step.
Form Modal
Add/edit form inside a modal, like Add Customer or Product.
Image Gallery Modal
Full-size image preview with a thumbnail strip.
Video Modal
Embedded video player with playback controls.
Nested Modal
A modal that opens a second modal on top of it.
No-Animation Modal
Appears instantly with no fade transition.