Modal / Dialog

Overlaid modal dialog for focused tasks, confirmations, and complex forms

What is it?

A modal (dialog) is an overlaid UI surface that captures user attention to complete a task, show critical information, or request a confirmation. Modals typically include a header, body content, and footer actions (primary and secondary buttons). They should be dismissible via a close control, escape key, and an optional backdrop click.

Mockdown

```
┌────────────────────────────────────────────┐
│ [Title]                        [X]         │
│ ────────────────────────────────────────── │
│ │                                       │ │
│ │    Modal body content goes here.      │ │
│ │    Forms, previews, or messages.      │ │
│ │                                       │ │
│ ────────────────────────────────────────── │
│ [Secondary]               [Primary]      │
└────────────────────────────────────────────┘
```

Characteristics:
- Focus trapping and accessible labels
- Clear primary/secondary actions
- Dismissible by Esc and close button
- Backdrop to emphasize modal

Layouts Using This Pattern

┌──────────┬────────────────────────────────────┐
│ ◉ App    │  Search [____________]  🔔  👤    │
│          ├────────────────────────────────────┤
│ ● Home   │                                    │
│ ○ Inbox  │  ┌───────────────────────────────┐│
│ ○ Tasks  │  │  ⌘K  Quick Actions            ││
│ ○ Docs   │  │  ─────────────────────────    ││
│ ○ Team   │  │  📄 New Document              ││
│ ○ API    │  │  👥 Invite Team Member        ││
│          │  │  ⚙  Open Settings             ││
│ ──────── │  │  📊 View Analytics            ││
│ Settings │  │  ...                           ││
│ Help     │  └───────────────────────────────┘│
│          │                                    │
│          │  ┌──────────┐ ┌──────────────────┐│
│          │  │ Projects │ │  Recent Activity ││
│          │  │ ──────── │ │  ─────────────── ││
│          │  │ ▸ Alpha  │ │  ● Deploy v2.1   ││
│          │  │ ▸ Beta   │ │  ○ PR merged     ││
│          │  │ ▸ Gamma  │ │  ○ Issue #42     ││
│          │  └──────────┘ └──────────────────┘│
└──────────┴────────────────────────────────────┘

SaaS

SaaS App Shell with Command Palette

A complete SaaS application shell featuring a collapsible sidebar, command palette (⌘K), notification drawer, and multi-workspace switcher — the skeleton for any SaaS product.

--app-shell--sidebar--command-palette

Complex

Use these prompts to generate layouts built with this pattern.

--modal --dialog --overlay --focus

Ready to build?

Use this pattern as inspiration when creating UI layouts with AI tools.

Try the Editor Browse Layout Prompts