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="bos:dui-alert bos:dui-alert-success">...</div>
<!-- Outlined -->
<div role="alert" class="bos:dui-alert bos:bg-transparent bos:border bos:border-success bos:text-success">...</div>
<!-- Soft -->
<div role="alert" class="bos:dui-alert bos:bg-success/15 bos:text-success bos:border-none">...</div>