CSS-Only

Alert

Contextual feedback messages with semantic variants for success, warning, danger, and informational states. Pure CSS, zero JavaScript required.

Example

Success! Your changes have been saved. 
<div class="omni-alert" data-variant="success" role="status">
  <strong>Success!</strong> Your changes have been saved.
</div>

<div class="omni-alert" data-variant="warning" role="alert">
  <strong>Warning:</strong> This action cannot be undone.
</div>

<div class="omni-alert" data-variant="danger" role="alert">
  <strong>Error:</strong> Failed to process your request.
</div>

Variants

Semantic Variants

Use data-variant to convey meaning through color:

Primary: General information or highlights.
Success: Operation completed successfully.
Info: Helpful tips or additional context. 
<div class="omni-alert" data-variant="primary" role="status">...</div>
<div class="omni-alert" data-variant="success" role="status">...</div>
<div class="omni-alert" data-variant="warning" role="alert">...</div>
<div class="omni-alert" data-variant="danger" role="alert">...</div>
<div class="omni-alert" data-variant="info" role="status">...</div>

Default (Neutral)

Alerts without data-variant use neutral styling:

This is a neutral alert without any variant. 
<div class="omni-alert" role="status">
  This is a neutral alert without any variant.
</div>

Dismissible Alerts

Add data-dismissible="true" to include a close button. Use the .omni-close utility class for the button:

Success! Your settings have been updated.
Tip: You can dismiss this message. 
<div class="omni-alert" data-variant="success" data-dismissible="true" role="status">
  <strong>Success!</strong> Your settings have been updated.
  <button class="omni-close" aria-label="Dismiss alert"></button>
</div>

With Rich Content

Alerts can contain headings, paragraphs, lists, and links:

New features available: We've updated the dashboard with improved analytics. Learn more 
<div class="omni-alert" data-variant="warning" role="alert">
  <h4>Account Verification Required</h4>
  <p>Please verify your email address to access all features:</p>
  <ul>
    <li>Check your inbox for the verification email</li>
    <li>Click the confirmation link</li>
    <li>Return here to continue</li>
  </ul>
</div>

API Reference

Attribute Values Default Description
data-variant primary, success, warning, danger, info — Semantic color variant for the alert
data-dismissible true — Adds spacing for close button positioning
role alert, status — ARIA role for screen reader announcements (required)

CSS Classes

Class Element Description
.omni-alert Container Base alert component (required)
.omni-close Button Close button for dismissible alerts (global utility)

Accessibility

  • ARIA Roles Required: Always include either role="alert" or role="status" for proper screen reader announcements
  • Urgent Messages: Use role="alert" for danger and warning variants (implies aria-live="assertive" - announced immediately)
  • Non-Urgent Messages: Use role="status" for success, info, and primary variants (implies aria-live="polite" - announced when idle)
  • Dismissible Alerts: Close buttons must include aria-label="Dismiss alert" for screen readers
  • Color Independence: Don't rely solely on color to convey meaning - use text labels like "Success:", "Warning:", "Error:"
  • Keyboard Navigation: Close buttons are fully keyboard accessible (Tab, Enter, Space)
  • Responsive: Font size and padding adjust for mobile devices (≤640px)
  • High Contrast: Border and background colors maintain proper contrast ratios using color-mix()

Recommended Role Mapping

<!-- Urgent (announced immediately) -->
<div class="omni-alert" data-variant="danger" role="alert">...</div>
<div class="omni-alert" data-variant="warning" role="alert">...</div>

<!-- Advisory (announced when idle) -->
<div class="omni-alert" data-variant="success" role="status">...</div>
<div class="omni-alert" data-variant="info" role="status">...</div>
<div class="omni-alert" data-variant="primary" role="status">...</div>