Alert Component

Alerts provide contextual feedback messages for typical user actions. They can be used for success messages, warnings, errors, and general information.

Basic Alerts

Basic alerts are static and non-dismissible. Use them for information that should persist on the page.

This is a basic informational alert.
<div class="alert alert-info">
    <i class="fas fa-info-circle alert-icon"></i>
    <div class="alert-content">This is a basic informational alert.</div>
</div>

Alert Colors

Alerts use semantic HTML with single classes and descendant selectors, following Axiom01's minimalist philosophy.

Success! Your profile has been updated.
Warning: Your trial period is about to expire.
Error: Could not save your changes. Please try again.
<!-- Success -->
<div class="alert success">
    <i class="fas fa-check-circle"></i>
    <div class="content"><strong>Success!</strong> Your profile has been updated.</div>
</div>

<!-- Warning -->
<div class="alert warning">
    <i class="fas fa-exclamation-triangle"></i>
    <div class="content"><strong>Warning:</strong> Your trial period is about to expire.</div>
</div>

<!-- Error -->
<div class="alert error">
    <i class="fas fa-exclamation-circle"></i>
    <div class="content"><strong>Error:</strong> Could not save your changes. Please try again.</div>
</div>

Dismissible Alerts

Add the `dismissible` class variant to create dismissible alerts. The close functionality is handled by descendant selectors and JavaScript.

This is a dismissible success alert with an icon.
<div class="alert dismissible success">
    <i class="fas fa-check-circle"></i>
    <div class="content">You can dismiss this success alert.</div>
    <button class="close" data-alert-close>&times;</button>
</div>

Dynamic Alerts (Toasts)

Use the `AxiomComponents.Alert.show()` JavaScript method to create dynamic "toast" notifications. These are useful for providing feedback on asynchronous actions.

// Show a success toast
AxiomComponents.Alert.show('success', 'This is a success toast.');

// Show an error toast that auto-dismisses after 5 seconds
AxiomComponents.Alert.show('error', 'This will disappear in 5s.', { autoDismiss: 5000 });

Accessibility