Alert

An alert (.alert) is an inline, persistent banner used to surface a message directly in the page flow — a trial-expiry notice, a form-level validation summary, a maintenance warning — distinct from a toast, which is a transient, self-dismissing overlay. It stays on the page until dismissed or removed by the containing page.

Payment failed

We couldn't charge your card ending in 4242.

<div class="alert alert-danger" role="alert">
  <span class="alert-icon" aria-hidden="true">⚠</span>
  <div class="alert-content">
    <strong class="alert-title">Payment failed</strong>
    <p class="alert-body">We couldn't charge your card ending in 4242.</p>
    <div class="alert-actions">
      <button type="button" class="btn btn-sm btn-danger"><span class="btn-label">Retry</span></button>
    </div>
  </div>
  <button type="button" class="alert-dismiss action-dismiss" aria-label="Dismiss">✕</button>
</div>