Alert
An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
Simple Alert
There are five variants of Simple Alerts available, primary alert, success alert, info alert, warning alert, and error alert. Simple Alerts can be created by adding the .alert class
and as per your requirement for the variant, you will have to add .alert-primary, .alert-success, .alert-info, .alert-warning, .alert-error class names.
<div class="alert alert-primary rounded-sm space-S">This is the primary alert. Check this out!</div>
<div class="alert alert-success rounded-sm space-S">This is the success alert. Check this out!</div>
<div class="alert alert-info rounded-sm space-S">This is the info alert. Check this out!</div>
<div class="alert alert-warning rounded-sm space-S">This is the warning alert. Check this out!</div>
<div class="alert alert-error rounded-sm space-S">This is the error alert. Check this out!</div>
Icon Alerts
There are four variants of Icon Alerts available, success alert, info alert, warning alert, and error alert. Icon Alerts can be created by adding the .alert class
and as per your requirement for the variant, you will have to add .alert-icon-success, .alert-icon-info, .alert-icon-warning, .alert-icon-error class names.
<div class="alert alert-icon-success rounded-sm space-S"><i class="fa-solid fa-circle-check"></i> This is the success alert. Check this out!</div>
<div class="alert alert-icon-info rounded-sm space-S"><i class="fa-solid fa-circle-info"></i> This is the info alert. Check this out!</div>
<div class="alert alert-icon-warning rounded-sm space-S"><i class="fa-solid fa-triangle-exclamation"></i> This is the warning alert. Check this out!</div>
<div class="alert alert-icon-error rounded-sm space-S"><i class="fa-solid fa-circle-exclamation"></i> This is the error alert. Check this out!</div>
Filled Alerts
There are five variants of Filled Alerts available, primary alert, success alert, info alert, warning alert, and error alert. Simple Alerts can be created by adding the .alert class
and as per your requirement for the variant, you will have to add .alert-primary-filled, .alert-success-filled, .alert-info-filled, .alert-warning-filled, .alert-error-filled class names.
<div class="alert alert-primary-filled rounded-sm space-S"><i class="fa-solid fa-exclamation"></i> This is the primary alert. Check this out!</div>
<div class="alert alert-success-filled rounded-sm space-S"><i class="fa-solid fa-circle-check"></i> This is the success alert. Check this out!</div>
<div class="alert alert-info-filled rounded-sm space-S"><i class="fa-solid fa-circle-info"></i> This is the info alert. Check this out!</div>
<div class="alert alert-warning-filled rounded-sm space-S"><i class="fa-solid fa-triangle-exclamation"></i> This is the warning alert. Check this out!</div>
<div class="alert alert-error-filled rounded-sm space-S"><i class="fa-solid fa-circle-exclamation"></i> This is the error alert. Check this out!</div>