Modal

Modals are a type of window that appears in front of a page’s content to provide information or ask for a decision. Modals require immediate attention and disable all functionality until the user decides to confirm, dismiss or take appropriate action.

When to use

Focused action

Use modals to have users complete actions in a focused setting

Focused action

Use modals to have users complete actions in a focused setting

Focused action

Use modals to have users complete actions in a focused setting

Immediate attention

As modals isolate users in a mode, modals can be used to indicate that a task needs immediate attention in order to progress

Immediate attention

As modals isolate users in a mode, modals can be used to indicate that a task needs immediate attention in order to progress

Immediate attention

As modals isolate users in a mode, modals can be used to indicate that a task needs immediate attention in order to progress

Preventative measure

Use modals as a way to confirm that the user understands the action they’re about to take and the consequences of following through

Preventative measure

Use modals as a way to confirm that the user understands the action they’re about to take and the consequences of following through

Preventative measure

Use modals as a way to confirm that the user understands the action they’re about to take and the consequences of following through

When to avoid

Specifications

Sample

Focused action

Demands immediate user attention to confirm a critical action or respond to a system event before the user can resume work in the main application.

Focused action

Demands immediate user attention to confirm a critical action or respond to a system event before the user can resume work in the main application.

Focused action

Demands immediate user attention to confirm a critical action or respond to a system event before the user can resume work in the main application.

Focused action

Demands immediate user attention to confirm a critical action or respond to a system event before the user can resume work in the main application.

Anatomy

Title

Should provide a clear and concise summary of the modal's purpose or the key question being asked.

Slot

Allows designers to swap in customizable content. Can be plain text, a form, and / or images. Keep content in modals brief to help the user understand information or to quickly complete a task.

Divider

Only appears on scroll in modals with longer content.

Footer

Fixed to provide a persistent location for primary and secondary action buttons related to the modal's content. Almost always, the primary action should allow the user to complete and close the modal.

Value

Modal