Theme:
Alert
Alerts display important messages to the user. They come in four semantic colors: info, success, warning, and error.
Default Alert
This is a neutral alert with default styling.
<div class="dui-alert">
<span>This is a neutral alert with default styling.</span>
</div>
Info
Your account has been updated. Changes may take a few minutes to propagate.
<div class="dui-alert dui-alert-info">
<span>Your account has been updated. Changes may take a few minutes to propagate.</span>
</div>
Success
Payment received! Your order #1024 is now being processed.
<div class="dui-alert dui-alert-success">
<span>Payment received! Your order #1024 is now being processed.</span>
</div>
Warning
Your trial expires in 3 days. Upgrade now to avoid service interruption.
<div class="dui-alert dui-alert-warning">
<span>Your trial expires in 3 days. Upgrade now to avoid service interruption.</span>
</div>
Error
Unable to save changes. Please check your connection and try again.
<div class="dui-alert dui-alert-error">
<span>Unable to save changes. Please check your connection and try again.</span>
</div>