Use for:
- Short information that immediately affects the user.
- Action confirmations, e.g. “Are you sure?”
- Success states after completing a flow, especially if it includes additional info
- Error state after completing a flow, especially if it includes additional info
- Limited form inputs (no more than 4)
Structure and layout
- Should contain only 1 step
- Should require no more than 5 clicks to complete, meaning it shouldn’t involve more than 4 form-type fields
- Should include a single primary action that’s aligned with the user’s original intention
- Cancel buttons and dismiss icons are optional but strongly encouraged
Attributes
Title:
- Always h2 heading style
- Always Ink, mono900
Subtitle:
- Always “body (default)” and never “body tight” or “body sm” or “body sm tight.” May include body bold.
- Always Ink, mono900
- May contain the List component and form components like text inputs and selects
Content
Title
- 1 line ideally, 2 lines max
- Revolve around a strong action verb
- Clearly indicate the overall purpose of the dialogue and the most important thing for the user
- Clearly relate with the action that triggered the dialogue.
- E.g.: user chooses a button called “Add new role” and the dialogue title and CTA of the dialogue also say “Add new role.”
- Not a question, unless it’s a confirmation dialogue
- Avoid empty phrases like “Are you sure that you want to exit without saving?” and go straight to the point, e.g. “Exit without saving?”
Subtitle
- Ideally no longer than 2-3 lines
- Use to give additional context, but keep it short and focused
- Avoid repeating what’s in the title. If there’s nothing else to say, remove the subtitle.
- Typically doesn’t include questions
- If it lists things, use the list component
Actions
- Always include at least 1 primary action aligned with the user’s intentions
- The primary action should replicate the main verb in the title
- Don’t use “Yes, [verb]” or “No, [verb]” for buttons (see button guidelines)
- Can include 1-2 secondary and/or tertiary actions (see button guidelines)
- “Cancel” is always tertiary
Native app: Stacking buttons
Dismiss
This is the “x” at the top right of the dialogue. It is always the icon button > size small with the “close” icon.
Attributes
- Functionally, this action is equivalent to: Cancel, Back or Got it.
- Including a dismiss action is optional but highly encouraged
- Hide a dismiss icon only when “Cancel” or “Back” action would be detrimental to the flow (see “No dismiss” example below)
- Always use the Icon button component in the “Small” size
Phone: Native dialogue + Bottom sheets
- Use native dialogue for server-side errors.
- Use bottom sheets for other types of content that require a dialogue.
Alignment
Centered horizontally and vertically within the viewport
Scrim
The scrim covers the entire viewport, including navigation. Clicking or tapping the scrim does not result in the dialogue closing.
Stacking dialogues (aka modal-on-modal)
- Don’t stack a dialogue on top of another dialogue or modal, ever.
- If a dialogue requires an additional dialogue to confirm, or if it triggers an additional modal, then the original content should be in a page.
Resources
(internal only)