Basic Modal

Use for simple information display or read-only content. Keep content concise and provide clear dismiss options.

Confirmation Modal

Essential for destructive actions. Always use warning icons, specific button labels, and clearly explain consequences.

Action Modal

Perfect for task completion with forms. Use contextual icons and provide clear primary/secondary actions.

Informational Modal

Use for help content and contextual information. Structure content clearly and keep it scannable.

Warning Modal

Alert users to potential issues before proceeding. Use warning colors and provide helpful context.

Success Modal

Celebrate user achievements and provide positive feedback. Include relevant metrics when helpful.

Error Modal

Communicate failures clearly with friendly language. Provide specific solutions and avoid technical jargon.

Nested Modal

Use sparingly for multi-step workflows. Maintain clear navigation and ensure users understand the hierarchy.

When to Use Modals

• Requiring immediate user attention for critical information or decisions

• Collecting user input without navigating away from the current context

• Confirming destructive or irreversible actions before execution

• Displaying detailed information that doesn't warrant a separate page

• Presenting workflows that need to maintain the underlying page state