Modal

Display focused content or actions

What it solves

A modal appears on top of the main application screen, blocking page interaction until closed. Modals display important information, request user input, or confirm actions in a focused way.

When to use

Use modals to interrupt user flow for important information or required user input before proceeding. Common scenarios include:

• Confirmation dialogs – "Are you sure you want to delete this item?"
• Critical system messages – session expiration warnings, important alerts
• Forms requiring user input – login, payment, or signup flows
• Media previews – images or videos in lightbox overlays
• Multi-step processes – checkout steps or onboarding flows
• Terms and conditions – requiring user agreement before proceeding