Modals

Modals are used to provide informational or alert messaging. They contain a brief message followed by any applicable actions, and must be acted on to dismiss.

Except for very special cases such as an in-flow sign up progress, modals are only recommended to be used for messaging.  Instead of using a modal on top of a page or trowser to complete a task in context, use stacking trowsers or a drawer, depending on the context.

Web

When to Use

  • To communicate information to the user and allowing the user to make a selection (if necessary); they should never be used for performing tasks.
  • To display critical actions or notifications that need the user’s immediate attention.

Appearance & Behavior

  • Modals appear using a fade in transition, and display in a modal state.
  • They come in 3 widths: 350px, 530px, 600px.
  • The background is grayed out (40% opacity, black).
  • The border radius for the modal is 2px.
  • If there is one call to action (CTA,)  button, center it.
  • if there are primary and secondary CTAs, the primary is always on the right, secondary on the left.

Example of a critical alert – you’re about to lose data!

A one-button dialog

modal_dia_two-buttons

TWO-BUTTON DIALOGS

Text Guidelines

  • Modal title capitalization is sentence case
© Intuit 2016 | Terms of use