Alert

Notification alerts with color variants and dismissible options for user feedback.

Alert Variants

Different alert types for various notification contexts

Info! This is a primary alert message.
Success! Your action was completed successfully.
Warning! Please review this important message.
Error! Something went wrong. Please try again.
💡
Did you know? Click the × button to dismiss alerts.
<div class="antsand-alert antsand-alert-success">
    <span class="antsand-alert-icon">✓</span>
    <div class="antsand-alert-content">
        <strong>Success!</strong> Your action was completed.
    </div>
    <button class="antsand-alert-close">×</button>
</div>

<div class="antsand-alert antsand-alert-danger">
    <span class="antsand-alert-icon">✕</span>
    <div class="antsand-alert-content">
        <strong>Error!</strong> Something went wrong.
    </div>
</div>

Available Classes