Alert

Contextual feedback messages. One root class — alert — with a semantic modifier for type. Fully accessible with ARIA live regions.

Alert Types

Information

This is an informational message.

Success

Your changes have been saved.

<div class="alert info" role="status">
  <span class="axicon render" data-name="Info"></span>
  <div>
    <strong>Information</strong>
    <p>Informational message.</p>
  </div>
</div>

<div class="alert success" role="status">
  <span class="axicon render" data-name="Check-Circle"></span>
  <div>
    <strong>Success</strong>
    <p>Your changes have been saved.</p>
  </div>
</div>

<div class="alert warning" role="alert">...</div>
<div class="alert error" role="alert">...</div>

Dismissible

<aside class="alert success" role="status">
  <span class="axicon render" data-name="Check-Circle"></span>
  <div>
    <strong>File uploaded</strong>
    <p>Saved successfully.</p>
  </div>
  <button aria-label="Dismiss" data-dismiss="alert">
    <span class="axicon render" data-name="X"></span>
  </button>
</aside>

Outline Variant

<aside class="alert outline" role="status">
  <div>
    <strong>Outline Variant</strong>
    <p>Transparent background with a coloured border.</p>
  </div>
</aside>

Text Only

Your session expires in 5 minutes.

<div class="alert info" role="status">
  <p>Your session expires in 5 minutes.</p>
</div>

Variants Reference

ClassUseARIA Role
alert infoNeutral tips, hintsrole="status"
alert successConfirmations, savesrole="status"
alert warningCaution requiredrole="alert"
alert errorFailures, validationrole="alert"
alert outlineLow-emphasis, transparent surfacerole="status"

Accessibility

  • Use role="alert" for errors and warnings — announced immediately
  • Use role="status" for success and info — announced politely
  • Icons are decorative — text must convey the full message
  • Dismiss button needs aria-label="Dismiss alert"
  • For dynamically injected alerts, wrap in aria-live="polite"

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Alert component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.