Basic Design
System V1.0

Search…

Basic Design
System V1.0

Search…

Menu

Basic Design
System V1.0

Go back

Modal

Live

Modals are temporary overlays that require user interaction before continuing. They are used to display important information, request input, or confirm actions without navigating away from the current page.

AA

WCAG 2.1 accessibility compliant

Go back

Modal

Live

Modals are temporary overlays that require user interaction before continuing. They are used to display important information, request input, or confirm actions without navigating away from the current page.

AA

WCAG 2.1 accessibility compliant

Go back

Modal

Modals are temporary overlays that require user interaction before continuing. They are used to display important information, request input, or confirm actions without navigating away from the current page.

Live in Storybook

This component is currently live in the Basic Design System V1.0

Live in Storybook

This component is currently live in the Basic Design System V1.0

Live in Storybook

This component is currently live in the Basic Design System V1.0

View Figma Designs

View Figma Component Designs

View Figma Designs

View Figma Component Designs

View Figma Designs

View Figma Component Designs

A well-designed modal ensures clarity, focus, and accessibility, helping users complete tasks efficiently while preventing unnecessary disruptions.

A modal dialog box with a warning message that says, “Your data won’t be saved! Are you sure you want to quit registration?” Below the message, there are two buttons: “Continue editing” in a white outline and “Quit” in a red-filled button. A close icon (✕) is positioned at the top-right corner, allowing users to dismiss the modal. The design emphasizes the quit action with a red button, signaling a potentially irreversible action.

When to use

When not to use

✅ Confirming critical actions

⛔️ For minor notifications

✅ Requesting user input

⛔️ As a primary navigation method

✅ Displaying important alerts

⛔️ When users need background context

✅ Focusing user attention


Best practices for usability

  • Keep content focused – Modals should contain only essential information and actions.

  • Use clear call-to-action buttons – The primary action (e.g., “Confirm”) should stand out, while secondary actions (“Cancel”) should be more subtle.

  • Prevent background interaction – Users should not be able to interact with elements outside the modal.

  • Allow easy dismissal – Users should be able to close modals using:

    • The Escape key

    • A close button

    • Clicking outside the modal (for non-critical dialogs)

Anatomy

When to use

When not to use

  1. Modal header

Header content, Title

  1. Close Button

dsButton

  1. Empty

Empty content

  1. Modal footer

Footer content

  1. Button

Secondary button

  1. Button

Primary button


Spacing

Default

Divided

Header

Footer

A well-designed modal ensures clarity, focus, and accessibility, helping users complete tasks efficiently while preventing unnecessary disruptions.

A modal dialog box with a warning message that says, “Your data won’t be saved! Are you sure you want to quit registration?” Below the message, there are two buttons: “Continue editing” in a white outline and “Quit” in a red-filled button. A close icon (✕) is positioned at the top-right corner, allowing users to dismiss the modal. The design emphasizes the quit action with a red button, signaling a potentially irreversible action.

When to use

When not to use

✅ Confirming critical actions

⛔️ For minor notifications

✅ Requesting user input

⛔️ As a primary navigation method

✅ Displaying important alerts

⛔️ When users need background context

✅ Focusing user attention


Best practices for usability

  • Keep content focused – Modals should contain only essential information and actions.

  • Use clear call-to-action buttons – The primary action (e.g., “Confirm”) should stand out, while secondary actions (“Cancel”) should be more subtle.

  • Prevent background interaction – Users should not be able to interact with elements outside the modal.

  • Allow easy dismissal – Users should be able to close modals using:

    • The Escape key

    • A close button

    • Clicking outside the modal (for non-critical dialogs)

Anatomy

When to use

When not to use

  1. Modal header

Header content, Title

  1. Close Button

dsButton

  1. Empty

Empty content

  1. Modal footer

Footer content

  1. Button

Secondary button

  1. Button

Primary button


Spacing

Default

Divided

Header

Footer

A well-designed modal ensures clarity, focus, and accessibility, helping users complete tasks efficiently while preventing unnecessary disruptions.

A modal dialog box with a warning message that says, “Your data won’t be saved! Are you sure you want to quit registration?” Below the message, there are two buttons: “Continue editing” in a white outline and “Quit” in a red-filled button. A close icon (✕) is positioned at the top-right corner, allowing users to dismiss the modal. The design emphasizes the quit action with a red button, signaling a potentially irreversible action.

When to use

When not to use

✅ Confirming critical actions

⛔️ For minor notifications

✅ Requesting user input

⛔️ As a primary navigation method

✅ Displaying important alerts

⛔️ When users need background context

✅ Focusing user attention


Best practices for usability

  • Keep content focused – Modals should contain only essential information and actions.

  • Use clear call-to-action buttons – The primary action (e.g., “Confirm”) should stand out, while secondary actions (“Cancel”) should be more subtle.

  • Prevent background interaction – Users should not be able to interact with elements outside the modal.

  • Allow easy dismissal – Users should be able to close modals using:

    • The Escape key

    • A close button

    • Clicking outside the modal (for non-critical dialogs)

Anatomy

When to use

When not to use

  1. Modal header

Header content, Title

  1. Close Button

dsButton

  1. Empty

Empty content

  1. Modal footer

Footer content

  1. Button

Secondary button

  1. Button

Primary button


Spacing

Default

Divided

Header

Footer

Continue reading

Previous

Illustration

Next

Notification

Previous

Illustration

Next

Notification

Previous

Illustration

Next

Notification

Get in touch

Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.

Send a message

Get in touch

Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.

Send a message

Get in touch

Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.

Send a message