Skip to main content

Alerts

Alert components for displaying notifications, warnings, and feedback messages.

Interactive Alert Demo

Customize alert variants, sizes, and options to see how they look.

HTML
<!-- Alert Component -->
<div class="alert alert-info" role="alert">
  <span class="alert-icon">ℹ️</span>
  <div class="alert-content">
    <strong class="alert-title">Info</strong>
    <p class="alert-message">This is a info alert message.</p>
  </div>
  
</div>

Basic Usage

HTML
<div class="alert alert-info" role="alert">
  <span class="alert-icon">ℹ️</span>
  <div class="alert-content">
    <strong class="alert-title">Information</strong>
    <p class="alert-message">This is an informational message.</p>
  </div>
</div>

Variants

CSS
.alert-info     /* Blue - Informational messages */
.alert-success  /* Green - Success messages */
.alert-warning  /* Yellow - Warning messages */
.alert-error    /* Red - Error messages */

Sizes

CSS
.alert-sm   /* Small padding and text */
.alert-md   /* Medium padding and text (default) */
.alert-lg   /* Large padding and text */

Dismissible Alerts

HTML
<div class="alert alert-info alert-dismissible" role="alert">
  <span class="alert-icon">ℹ️</span>
  <div class="alert-content">
    <strong class="alert-title">Information</strong>
    <p class="alert-message">This alert can be dismissed.</p>
  </div>
  <button class="alert-close" aria-label="Close">&times;</button>
</div>

Accessibility

  • Always use role="alert" for important messages
  • Include aria-label on close buttons
  • Use appropriate color contrast for all variants
  • Consider using aria-live for dynamically inserted alerts