Alert
Alerts display important messages to attract the user's attention without interrupting their workflow.
Variants
Default alert — neutral informational message.
Info alert — additional context or tips.
Success — your changes have been saved.
Warning — please review before continuing.
Error — something went wrong. Please try again.
With Actions
Your session is about to expire.
Failed to save — please try again.
Deployment complete.
Outlined
Info — outlined style for subtle emphasis.
Success — outlined style for subtle emphasis.
Warning — outlined style for subtle emphasis.
Error — outlined style for subtle emphasis.
Soft
Info — soft tinted background for lighter context.
Success — soft tinted background for lighter context.
Warning — soft tinted background for lighter context.
Error — soft tinted background for lighter context.
Usage
<!-- Filled (default) -->
<div role="alert" class="sa:dui-alert sa:dui-alert-success">...</div>
<!-- Outlined -->
<div role="alert" class="sa:dui-alert sa:bg-transparent sa:border sa:border-success sa:text-success">...</div>
<!-- Soft -->
<div role="alert" class="sa:dui-alert sa:bg-success/15 sa:text-success sa:border-none">...</div>