Alerts
Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.
Examples
Alerts are available for any length of text, as well as an optional dismiss button.
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<div class="alert alert-primary" role="alert">
<span>A simple primary alert—check it out!</span>
</div>Link color
Use the .alert-link utility class to quickly provide matching colored links within any alert.
A simple primary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
<div class="alert alert-primary" role="alert">
<span>A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span>
</div>
<div class="alert alert-success" role="alert">
<span>A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span>
</div>With icons
An example informational alert with an official Haticon.
A success alert indicating your transaction was completed.
<div class="alert alert-info d-flex align-items-center" role="alert">
<i class="hi-info-alt alert-icon me-2" aria-hidden="true"></i>
<div><span>An example informational alert with an official Haticon.</span></div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
<i class="hi-check-circle-fill alert-icon me-2" aria-hidden="true"></i>
<div><span>A success alert indicating your transaction was completed.</span></div>
</div>Dismissing
Add a dismiss button and the optional .alert-dismissible utility class, then use
data-boodoo-alert + data-boodoo-dismiss="alert" to wire up the close button.
Holy guacamole! You should check in on some of those fields below.
<div class="alert alert-warning alert-dismissible fade show" role="alert" data-boodoo-alert>
<span><strong>Holy guacamole!</strong> You should check in on some of those fields below.</span>
<button type="button" class="btn-close" data-boodoo-dismiss="alert" aria-label="Close"></button>
</div>JavaScript behavior
Alerts can also be dismissed programmatically:
// Close all alerts
document.querySelectorAll('.alert[data-boodoo-alert]').forEach(function (el) {
boodoo.Alert.getOrCreateInstance(el).hide();
});