Alerts

Use alerts to display important messages and notifications to users. Each alert variant ships with a matching Lucide icon: Info, CheckCircle2, AlertTriangle, or XCircle.

Information Alert

Use for neutral information that users should be aware of.

<div class="alert alert-info" role="status">
  <span class="alert-icon">
    <!-- Lucide: Info -->
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round"
         aria-hidden="true" focusable="false">
      <circle cx="12" cy="12" r="10" />
      <path d="M12 16v-4" /><path d="M12 8h.01" />
    </svg>
  </span>
  <div class="alert-content">
    <h3 class="alert-title">New service available</h3>
    <div class="alert-body">
      <p>You can now renew your driving licence online.</p>
    </div>
  </div>
</div>

Success Alert

Use to confirm a successful action or completion.

<div class="alert alert-success" role="status">
  <span class="alert-icon">
    <!-- Lucide: CheckCircle2 -->
    <svg width="24" height="24" ...><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
  </span>
  <div class="alert-content">
    <h3 class="alert-title">Application submitted</h3>
    <div class="alert-body">
      <p>Your passport application has been successfully submitted.</p>
    </div>
  </div>
</div>

Warning Alert

Use to warn users about something that might cause problems.

<div class="alert alert-warning" role="alert">
  <span class="alert-icon">
    <!-- Lucide: AlertTriangle -->
    <svg width="24" height="24" ...>...</svg>
  </span>
  <div class="alert-content">
    <h3 class="alert-title">Session expiring soon</h3>
    <div class="alert-body">
      <p>Your session will expire in 5 minutes.</p>
    </div>
  </div>
</div>

Error Alert

Use to inform users about errors or problems that need attention.

<div class="alert alert-error" role="alert">
  <span class="alert-icon">
    <!-- Lucide: XCircle -->
    <svg width="24" height="24" ...>...</svg>
  </span>
  <div class="alert-content">
    <h3 class="alert-title">There is a problem</h3>
    <div class="alert-body">
      <p>The form could not be submitted. Please check the following:</p>
      <ul>
        <li><a href="#name">Enter your full name</a></li>
        <li><a href="#email">Enter a valid email address</a></li>
      </ul>
    </div>
  </div>
</div>

Simple Alert (No Title)

For simple messages you can omit the title. The icon and body sit on a single row.

<div class="alert alert-info" role="status">
  <span class="alert-icon"><!-- Lucide: Info --></span>
  <div class="alert-content">
    <div class="alert-body">
      <p>This service is available Monday to Friday, 9am to 5pm.</p>
    </div>
  </div>
</div>

Alert Without an Icon

When the message itself supplies enough visual cue or you need a tighter layout, omit the .alert-icon element. The CSS still flexes cleanly because the icon slot is optional.

<div class="alert alert-info" role="status">
  <div class="alert-content">
    <div class="alert-body">
      <p>This service is in beta.</p>
    </div>
  </div>
</div>

Error Summary (Form Validation)

Use at the top of a form to summarise validation errors. Link each error to the relevant field.

<div class="alert alert-error" role="alert" aria-labelledby="error-summary-title">
  <span class="alert-icon"><!-- Lucide: XCircle --></span>
  <div class="alert-content">
    <h3 class="alert-title" id="error-summary-title">There is a problem</h3>
    <div class="alert-body">
      <ul>
        <li><a href="#full-name">Enter your full name</a></li>
        <li><a href="#date-of-birth-day">Date of birth must include a day</a></li>
        <li><a href="#passport-number">Enter your passport number</a></li>
      </ul>
    </div>
  </div>
</div>

Icon Mapping

Each variant is paired with a Lucide icon. Override by passing your own Lucide component (or any SVG) into the .alert-icon slot.

React Usage

import { Alert } from '@kaharagia/react';

// Default — Lucide icon picked automatically per variant
<Alert variant="success" title="Application submitted">
  Your reference number is KAH-2024-12345.
</Alert>

// Override the icon
import { Bell } from 'lucide-react';
<Alert variant="info" title="Reminder" icon={<Bell aria-hidden="true" />}>
  Your appointment is tomorrow.
</Alert>

// Suppress the icon entirely
<Alert variant="info" title="Note" icon={null}>
  This service is in beta.
</Alert>

Web Component Usage

<!-- Default — icon picked automatically -->
<kds-alert variant="success" heading="Application submitted">
  Your reference number is KAH-2024-12345
</kds-alert>

<!-- Suppress the icon -->
<kds-alert variant="info" heading="Note" no-icon>
  This service is in beta.
</kds-alert>

When to Use Alerts

Information (Blue) — Info icon

• New features or services
• Important dates or deadlines
• General announcements

Success (Green) — CheckCircle2 icon

• Successful form submission
• Completed transactions
• Saved changes

Warning (Gold) — AlertTriangle icon

• Session timeouts
• Incomplete information
• Potential issues ahead

Error (Red) — XCircle icon

• Form validation errors
• Failed transactions
• System errors

Usage Guidelines

Do

• Use clear, concise language
• Place alerts at the top of the relevant content
• Link to specific form fields in error summaries
• Use the appropriate alert type for the message — icon and colour both carry the cue

Don't

• Don't overuse alerts — they lose impact
• Don't use error alerts for information messages
• Don't rely on colour alone to convey meaning — the icon is part of how the alert communicates
• Don't hide important alerts below the fold
• Don't add a focusable element to the icon — the icon is decorative (aria-hidden="true")

Accessibility

• Use role="alert" for warning and error messages that need immediate attention; use role="status" for info and success
• The icon is decorative — always set aria-hidden="true" on the SVG so screen readers don't announce it twice
• Use aria-labelledby to link the alert to its title
• Error summaries should appear above the form
• Links in error messages should jump to the relevant field
• Focus should move to the error summary when the form is submitted with errors

CSS Classes

/* Base alert (flex layout with icon slot) */
.alert { }

/* Variants */
.alert-info { }
.alert-success { }
.alert-warning { }
.alert-error { }

/* Slots */
.alert-icon { }       /* 24x24 icon slot, coloured per variant */
.alert-content { }    /* wraps title + body */
.alert-title { }
.alert-body { }