Resources
Intro & Anatomy
Alert buttons are interactive components that help users take action while providing immediate visual feedback about the nature or consequence of the action. Use alert buttons for actions that require user attention or communicate status, e.g. confirming deletions, saving changes, or acknowledging warnings.
Alert buttons maintain standard button functionality whilst incorporating visual cues through colour and styling to convey meaning.
MDX offers alert buttons with optional icons and multiple sizing options for different interface requirements.
Options & Styles
Variants
MDX offers three variants of alert buttons:
Success for positive actions and confirmations
Error for destructive or critical actions
Warning for cautionary actions requiring attention
Label & Icon
Labels are always required for alert buttons to clearly communicate the action and its consequence or importance level.
Icons are optional. Icons can be placed left or right of the label text.
Type
MDX offers 3 alert button variants for clear visual hierarchy:
Primary for main actions
Secondary for secondary actions
Tertiary for supporting actions styled as text links
Sizes
MDX alert buttons come in two different sizes:
small and medium.
Medium is the default size and should be used in most cases unless specific design requirements call for a different size.
Disabled Buttons
A disabled alert button shows that an action exists but isn't currently available, like when a form hasn't been completed.
We recommend avoiding disabled buttons when possible, as they don't explain why the button isn’t usable, and aren't accessible via keyboard navigation.
Best Practice & Usage
Alert buttons should communicate their purpose clearly using appropriate visual styling and descriptive labels. Use alert buttons when the action's consequence or importance needs immediate visual recognition.
Use alert buttons for actions that require user attention or have significant consequences.
Avoid using alert buttons for standard actions that don't require visual emphasis.
Use specific action-oriented language that clearly describes the consequence, e.g. "Delete account".
Avoid generic labels that lack context about the action's impact, e.g. "Delete".
Ensure the alert type corresponds to the action's consequence - success for positive outcomes, warning for caution, error for destructive actions.
Avoid mismatched alert types that confuse users, e.g. using success styling for account deletion.
Theming
You can customise colours, border width and radius, font styles, spacing, and paddings. When not using MDX icons, a slot is available to use your own icon library or SVG icons.
We recommend not changing the medium button height as it meets the minimum accessibility criteria requirements.
We further suggest maintaining clear visual distinction between alert types whilst ensuring adequate colour contrast for accessibility compliance.