When to use
Use a confirm dialog in the following cases:
- When important system events occur that require an immediate user action.
- For destructive actions, like deleting something, or consequential actions, like publishing a product.
- Especially for actions that cannot be undone.
There are the following confirm dialog types:
Alert confirm dialog
Use a confirm dialog with the severity state alert to inform and request a decision.
Warning confirm dialog
Use a confirm dialog with the severity state warning to inform about possible consequences and request a decision.
Information confirm dialog
Use a confirm dialog with the state information to inform the user about something.
Custom confirm dialog
Use a custom confirm dialog to inform the user about app specific or system tools related actions and optionally request a decision.
A confirm dialog consists of the following elements:
- Present the action as a short sentence or question in the title.
- Explain the outcome of the action in the confirmation text.
- Inform users about the consequence of their action.
- Keep the text short, simple and focused.
3. Footer bar with buttons
- A footer bar helps to separate the content area from the buttons.
- Restate the action in the confirmation buttons. Instead of generic button labels like Yes/No or OK/Cancel, provide options that summarize what will happen for each possible action.
- In an information confirm dialog the second button is optional.
- Use the icon to emphasize the meaning of the current action.
5. Top border
- Use the top border to emphasize the meaning of the current action.
- Icon and top border must have the same color.
- The confirm dialog has a drop shadow.
- The screen dimming overlay is always located above all other content.
- It lets the user know that the page is currently not active.
Show only one confirm dialog at a time.
Confirm dialog exit
Closing a confirm dialog is possible in the following ways:
Submit / Cancel button
- Quit the confirm dialog by clicking a button that submits or cancels the process.
- Submit and close the confirm dialog by pressing the enter key (= Primary action).
- Quit the confirm dialog by pressing the escape key (= Cancel action).
- A confirm dialog has a fixed width.
- The height of a confirm dialog is determined by the length of its content.
- The footer height is fixed.
- If the viewport becomes less than the fixed width, it will use the full screen size.
Do’s & Don’ts
- Only use a confirm dialog for serious consequences.
- Do not use a confirm dialog for routine actions.
- Use a descriptive user-centric body text, which explains clearly what consequences the action will cause.
- Do not use non-descriptive body text.
This chapter shows several confirm dialog styles in the design system.
The following table gives reference to the different colors and shades used:
|Title||all||Foreground color||Gray 800|
|Text||all||Foreground color||Gray 800|
|Top border, Icon||alert||Foreground color||Functional red|
|Top border, Icon||warning||Foreground color||Functional yellow|
|Top border, Icon||information||Foreground color||Cool blue|
|Top border, Icon||custom||Foreground color||Custom color|
|Overlay||all||Background color||Gray 800||Opacity 70%|
|Background||all||Box shadow||Black||0 2px 30px 0; rgba(0,0,0,0.5)|
The following table gives reference to the different font sizes and weights used in the component:
Sizing and spacing
The following measurements show the dimensions for this component:
A confirm dialog has a fixed width of 600px.
The confirm dialog is positioned in the center of the screen, that means it is vertically and horizontally centered.