Modal

Status

Component checklist

Key points

• Modals should be used when the user is presented with information that is short, concise, and can be displayed inside a single dialogue box or a height smaller than the viewport
• Modals block out the content on the level below with an overlay
• Modals are dismissed either by using the close button or pressing the Escape key
• On wider breakpoints, the modal has a fixed maximum width of 520px
• If you require custom content or the height is longer than the viewport, use an overlay dialogue

Use modals to display focused content or request user decisions without leaving the current page.