Title
All alert dialogs must have a title. The title appears in bold at the top of the dialog and uses a few words to convey the outcome of what will happen if a user continues with an action.
Data Display
Dialog
Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected.
Examples
Options
Description
Alert dialogs can include a description. A description briefly communicates any additional information or context that a user needs to know in order to make one of the decisions offered by the buttons.
Confirmation Variant
This is the default variant for alert dialogs. Use a confirmation variant for asking a user to confirm a choice. This alert dialog has a Primary button to highlight a strong preference for which action to take.
Informative Variant
Information alert dialogs communicate important information that a user needs to acknowledge. Before using this kind of alert dialog, make sure it's the appropriate communication channel for the message instead of a toast or a more lightweight messaging option.
Warning Variant
Warning alert dialogs communicate important information to users in relation to an issue that needs to be acknowledged, but does not block the user from moving forward. It has an orange warning icon near the title to reinforce its importance.
Destructive Variant
Destructive alert dialogs are for when a user needs to confirm an action that will impact their data or experience in a potentially negative way, such as deleting files or contacts. This alert dialog has a negative (red) button to highlight the destructive action.
Error Variant
Error alert dialogs communicate critical information about an issue that a user needs to acknowledge. This alert dialog has a warning icon to reinforce its importance.
Dismissible
A dialog can include an icon-only close button to dismiss it.
Primary Action Label
An alert dialog must have at least one button. The primary action label is for the first (end-most) button. It communicates what the button will do with a short, actionable phrase to either describe the next step if selected, or to acknowledge and dismiss the dialog.
Secondary Action Label
An alert dialog can have a total of 3 buttons if the secondary button label is defined. If left undefined, the button won’t appear. The secondary button label communicates what the button will do with a short, actionable phrase to describe what will happen in the next step, if selected.
Cancel Action Label
An alert dialog with a button that offers an option to go back and cancel the action will have a label of “Cancel,” by default.
Behaviors
Button Group Overflow
An alert dialog can have up to 3 buttons. When horizontal space is limited, button groups stack vertically. They should appear in ascending order based on importance, with the most critical action at the bottom.
Misc
Headless UI implementation
Using Carbon with the [Headless UI dialog component](https://headlessui.com/react/dialog).
Implementation
Example Name
Description and implementation notes
<p> code example </p>Information
Checklist
All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).
All Color Schemes
Works properly across all color schemes (light, dark).
Accessible Contrast for Text
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible Contrast for UI Components
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Defined Options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).
Defined Behaviors
Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.
Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing Guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Internationalization Guidelines
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Keyboard Interactions
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Design Tokens
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
UI Kit
Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.