Resources
Intro & Anatomy
Dialogs display critical information that requires the user's acknowledgment or interaction before they can continue with their task. Use dialogs for essential actions that need immediate attention, such as confirmations for destructive actions, critical alerts, or mandatory updates that affect the user's current workflow.
Dialogs restrict further interactions by disabling content behind them, ensuring users must address the presented information before proceeding. They inform users of critical information related to their current task, e.g. account deletion confirmations, and require user interaction with provided information, e.g. payment updates.
MDX offers four variants: Error, Warning, Success and Primary Colour
Options & Styles
Content
Title and description are mandatory to clearly communicate the dialog's purpose and required action.
Actions are mandatory and include single or multiple buttons for user response.
Icon is optional and can provide visual context for the dialog's message type.
Variants
MDX offers dialog variants for different message types:
Neutral for general confirmations and standard interactions
Warning for cautionary actions requiring user attention
Error for critical alerts and destructive action confirmations
Success for positive confirmations and completed actions
Best Practice & Usage
Dialogs should be used sparingly for truly critical interactions that require immediate user attention. Use clear, actionable language and provide distinct choices that help users understand consequences.
Use dialogs to display alerts, enforce immediate user interaction, and seek confirmations.
Do not use dialogs for marketing or low priority information. Use modals instead.
Always communicate clearly what is expected from users. Focus on the needed action and task outcome.
Avoid long, unclear texts and vague wording. Don't offer "yes" or "no" actions or use aggressive language.
Use when the required action is crucial to the user's task or product interaction. Optionally, use dialogs for success messages with further information prompts.
Don't display more than one dialog at a time or stack dialogs on top of each other.
Place dialogs in the centre of the screen on any screensize bigger than mobile. Set the background to your defined scrim colour.
Don't position alert dialogs off-center or on any coloured overlays.
Avoid centring dialogs on mobile screens.
Theming
You can customise colours, border radius and width, font styles, shadows, scrim colour, and spacings to match your design requirements whilst maintaining accessibility and usability standards.
When not using MDX icons, a slot is available to use your own icon library or SVG icons within tooltip content.