Alert

Alerts provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.

Basic Usage

The most basic alert uses the .alert class with semantic variants.

ℹ️This is an info alert with some information.

<div class="alert alert-info">
  <span>ℹ️</span>
  <span>This is an info alert with some information.</span>
</div>

Variants

Alerts come in different semantic variants to communicate different types of information.

Alert Variants

✅Success! Your changes have been saved successfully.

⚠️Warning: Please review your input before proceeding.

❌Error: Something went wrong. Please try again.

ℹ️Info: Here's some helpful information for you.

<div class="alert alert-success">
  <span>✅</span>
  <span><strong>Success!</strong> Your changes have been saved.</span>
</div>

<div class="alert alert-warning">
  <span>⚠️</span>
  <span><strong>Warning:</strong> Please review your input.</span>
</div>

<div class="alert alert-error">
  <span>❌</span>
  <span><strong>Error:</strong> Something went wrong.</span>
</div>

<div class="alert alert-info">
  <span>ℹ️</span>
  <span><strong>Info:</strong> Here's some information.</span>
</div>

With Actions

Alerts can include action buttons for user interaction.

Alerts with Actions

⚠️

Update Available

A new version of the application is available.

❌

Connection Failed

Unable to connect to the server.

<div class="alert alert-warning">
  <span>⚠️</span>
  <div>
    <div><strong>Update Available</strong></div>
    <div class="text-sm">A new version is available.</div>
  </div>
  <div class="flex gap-2">
    <button class="btn btn-sm btn-primary">Update</button>
    <button class="btn btn-sm btn-ghost">Later</button>
  </div>
</div>

Dismissible Alerts

Alerts can be made dismissible with a close button.

Dismissible Alerts

✅This alert can be dismissed by clicking the X button.

<div class="alert alert-success">
  <span>✅</span>
  <span>This alert can be dismissed.</span>
  <button class="btn btn-sm btn-ghost ml-auto" onclick="this.parentElement.remove()">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
    </svg>
  </button>
</div>

Without Icons

Alerts work perfectly fine without icons for a cleaner look.

Alerts without Icons

Success! Your profile has been updated.

New features are now available in your dashboard.

<div class="alert alert-success">
  <span><strong>Success!</strong> Your profile has been updated.</span>
</div>

<div class="alert alert-info">
  <span>New features are now available in your dashboard.</span>
</div>

Custom Icons

You can use custom SVG icons instead of emoji for a more consistent design system.

Custom SVG Icons

Payment processed successfully!

Your session will expire in 5 minutes.

<div class="alert alert-success">
  <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
  </svg>
  <span>Payment processed successfully!</span>
</div>

TypeScript Usage

import { Alert } from 'sageui';

// Create an alert instance
const alert = new Alert({
  type: 'success',
  title: 'Success!',
  message: 'Your changes have been saved.',
  dismissible: true,
  onClose: () => {
    console.log('Alert closed');
  }
});

// Mount to DOM
alert.mount('#alert-container');

CSS Classes Reference

Class	Description
.alert	Base alert container
.alert-success	Success alert variant (green)
.alert-warning	Warning alert variant (amber)
.alert-error	Error alert variant (red)
.alert-info	Info alert variant (blue)

Accessibility

SageUI alerts are built with accessibility best practices:

• Semantic HTML: Uses appropriate ARIA roles and attributes
• Screen Reader Support: Proper announcement of alert content
• Color Independence: Information is not conveyed by color alone
• Keyboard Navigation: Dismissible alerts are keyboard accessible
• Focus Management: Proper focus handling for interactive elements

Best Practices

• Use clear, concise messaging
• Include actions when appropriate
• Consider the alert's importance and urgency
• Provide alternative text for icons when needed

<!-- Good: Clear messaging with proper semantics -->
<div class="alert alert-error" role="alert">
  <svg aria-hidden="true">...</svg>
  <span>
    <strong>Error:</strong> Unable to save changes. 
    Please check your internet connection and try again.
  </span>
</div>

<!-- Good: With assistive technology considerations -->
<div class="alert alert-success" role="alert" aria-live="polite">
  <svg aria-hidden="true">...</svg>
  <span id="success-message">Your profile has been updated successfully.</span>
  <button 
    class="btn btn-sm btn-ghost"
    aria-label="Dismiss success message"
    onclick="this.parentElement.remove()">
    <svg>...</svg>
  </button>
</div>

Examples

Form Validation

Please correct the following errors:

• Email address is required
• Password must be at least 8 characters

<form class="space-y-4">
  <div class="alert alert-error" role="alert">
    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
    </svg>
    <div>
      <strong>Please correct the following errors:</strong>
      <ul class="list-disc list-inside mt-1 text-sm">
        <li>Email address is required</li>
        <li>Password must be at least 8 characters</li>
      </ul>
    </div>
  </div>
  
  <!-- Form fields here -->
</form>