Modal
UI ComponentsA dialog box that appears on top of the main content, requiring user interaction before returning to the underlying page. It typically includes an overlay that dims the background.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Modal coming soon.
How It Works in Apps/Websites
Modals interrupt the user's workflow to focus attention on a specific task or message. They float above the page content with a semi-transparent overlay behind them, preventing interaction with the background. Modals are used for confirmations, forms, alerts, and focused content viewing. They should have a clear way to close (X button, Cancel, or clicking the overlay) and be used sparingly to avoid frustrating users.
How AI Interprets This Term
When you say 'modal', AI understands this as a centered dialog box floating above a darkened/blurred overlay (typically 50-70% opacity black). The modal itself has a white/light background, rounded corners, padding, and usually includes a header with title, body content, and footer with action buttons. It expects a close button (X) in the top-right corner.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a confirmation modal asking 'Are you sure you want to delete this item?'
Design a form modal with title 'Create New Project', input fields for name and description, and Cancel/Create buttons in the footer. Include dark overlay and X close button.
Show the same content as both a centered modal and a slide-in drawer from the right side
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Confirmation dialogs (delete, submit, logout)
- •Short forms that don't need a full page
- •Focused content viewing (image galleries)
- •Important alerts that require acknowledgment
When NOT to Use
- •For content that users need to reference while working
- •Long, complex forms (use a dedicated page instead)
- •Informational content that doesn't require action
- •On mobile when a bottom sheet might work better