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.
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.
- Modal title capitalization is sentence case