Alert Component
Axiom01's alert component provides contextual feedback messages for users. They are designed to be clear, accessible, and easily themeable to match your application's aesthetic.
Alert Component
Axiom01's alert component provides contextual feedback messages for users. They are designed to be clear, accessible, and easily themeable to match your application's aesthetic.
Basic Alerts
Success! Your operation was completed successfully.
Heads up! This is an informational message.
Warning! Something might be wrong.
Error! Please correct the issues and try again.
<div class="alert success" role="alert">
<i class="fas fa-check-circle"></i>
<div>Success! Your operation was completed successfully.</div>
</div>
<div class="alert info" role="alert">
<i class="fas fa-info-circle"></i>
<div>Heads up! This is an informational message.</div>
</div>
<div class="alert warning" role="alert">
<i class="fas fa-exclamation-triangle"></i>
<div>Warning! Something might be wrong.</div>
</div>
<div class="alert error" role="alert">
<i class="fas fa-times-circle"></i>
<div>Error! Please correct the issues and try again.</div>
</div>Dismissible Alerts
Add a dismiss button to allow users to close the alert. This requires a small JavaScript snippet to handle the dismissal.
You can dismiss this alert.
Well done! You successfully read this important alert message.
<div class="alert info dismissible" role="alert">
<i class="fas fa-info-circle"></i>
<div>You can dismiss this alert.</div>
<button data-alert-close aria-label="Close alert">×</button>
</div>
<div class="alert success dismissible" role="alert">
<i class="fas fa-check-circle"></i>
<div>Well done! You successfully read this important alert message.</div>
<button data-alert-close aria-label="Close alert">×</button>
</div>