Dialog
Overview
A dialog displays important information to users without requiring them to navigate away from the page.
Status
Sample element
Modal dialog with a header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
When to use
- When you need to confirm user decisions
- When you need an immediate response from users
- When you need to notify users of urgent information concerning their current workflow
A dialog container with a black headline, black body text, two blue buttons,
and a dark gray close button all on a white background on top of a slightly
transparent black background
