Alert Component

Alerts provide contextual feedback messages for user actions and system status.

Alert Variants

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

New feature available

We've added dark mode support. You can enable it in your account settings.

Example Code

<div class="alert success" role="alert">
  <div>
    <h3>Payment successful</h3>
    <p>Your payment of $29.99 has been processed. A receipt has been sent to your email address.</p>
  </div>
</div>

<div class="alert info" role="alert">
  <div>
    <h3>New feature available</h3>
    <p>We've added dark mode support. You can enable it in your account settings.</p>
  </div>
</div>