Modal is considered an "excise" in interaction design where its function does not support the main user flow but instead represent extra work that satisfies either the needs of our tools or those of outside agents as users try to achieve our objectives. 

Component data

Functional grouping: Containers


Configure: select the dropdowns below to display the variety of options that a modal supports.



Responsive preview

Usage best practices

Component like modal is purposefully interruptive and charges users an excise of cognitive and physical effort every time it is used. Therefore modal should be used sparingly. Modal windows are appropriate for functions that are out of the main interaction flow.

Consider using modals to:

  • interrupt a user’s current task to catch their full attention to something more important
  • solicit user input in order to move forward i.e. sign up or login form
  • show additional information without losing the context of the parent page, i.e. showing larger images or videos

The modal can be closed by:

  • clicking on the close button
  • pressing the Esc key
  • clicking on the modal backdrop

The last functionality is disabled in the case where user input is required, for example, a confirmation dialog box where the user must explicitly click an option in the modal to proceed.


Use it sparingly as it is purposefully interruptive.

Clearly present the "close" button.


Do not use for primary interactions, which must always be in the primary window.

Do not use to show error, success, or warning messages. Keep them on the page.

Don’t surprise users by popping up a modal. Modal needs to be triggered by user's action, such as clicking a button. Uninvited modals may result in a quick dismissal of the window.