Components applied to focus the users’ attention to information and interactions by interrupting their current process or flow.

Modals are also referred to as:

  • Dialogs
  • Panels
  • Overlays



Requires users to stop and think before continuing with their chosen action. It always allows users a way to back out of their decision by including a cancel or close button.

See the Pen Modals - Confirmation by USANA UX (@usana_ux) on CodePen.


Notifies users of the consequences of their actions. Users are not allowed to continue without confirming the message has been read.

See the Pen Modals - Notification by USANA UX (@usana_ux) on CodePen.


Use modals when the user must make a decision or perform a task outside of their main workflow that demands their full attention.


  • Header - The title should properly define the modal.
  • Body - Text or components can be included in the body content.
  • Close/Dismiss - You can exit the modal without submitting any information.
  • Call to Action - Group of buttons.
  • Container - This is the container that holds the entire modal's content.
  • Overlay - This overlay obscures the content of the page.


Although there is no single rule for modal sizes, we recommend the following:

  • Mobile - 100%
  • Small - 320px
  • Default - 576px
  • Large & Fullscreen - 672px


These specifications enable designers and developers to create modals that are pixel-perfect.

  • Use heading markup for the details that reveals content underneath. 
  • Make sure the disclosed content comes right after the trigger that discloses it.
  • Use a button element as a trigger for disclosure. 
  • Make controls focused and or activated.
  • Think that they can activated by voice.