Athena UI

Alerts

Status messaging patterns for success, warning, danger, and information.

New Page

Status Messaging

Alert Set

Use alerts for information that affects the current task. Keep the message specific and include the next useful action.

Report published. The finance report is now visible to the leadership team.

Review needed. This workflow needs approval before launch.

Export failed. Try again or contact support if the issue continues.

Maintenance notice. A scheduled maintenance window starts tonight.

Best Practice

Writing Alerts

Say what happened, why it matters, and what to do next.
Use role="status" for polite updates and role="alert" for urgent errors.
Do not rely on colour alone; include text and icons where useful.

Dismissible

Dismissible Alert

Dismissible alerts need a labelled close button and should not hide information the user must act on later.

Payment method expiring. Update the card before the next renewal.

Form Feedback

Validation Summary

For forms, place a short summary before the fields and keep field-level messages near each input.

Check 2 fields

Use a work email address.
Choose at least one permission group.

Backend validation must still encode user input and return safe, useful errors.

Assurance Note

Accessibility And Security Limits

These examples support good frontend patterns, but they are not a WCAG 2.2 conformance claim or an OWASP assurance. Manual keyboard, screen reader, contrast, zoom, target-size, and backend security testing are still required after integration.

Read Accessibility Notes

<section class="row g-4">
      <div class="col-xl-8">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-primary mb-3">Status Messaging</span>
          <h2 class="h4">Alert Set</h2>
          <p class="text-secondary">Use alerts for information that affects the current task. Keep the message specific and include the next useful action.</p>
          <div class="athena-stack">
            <div class="alert alert-success d-flex gap-2" role="status"><i class="bi bi-check-circle" aria-hidden="true"></i><div><strong>Report published.</strong> The finance report is now visible to the leadership team.</div></div>
            <div class="alert alert-warning d-flex gap-2" role="alert"><i class="bi bi-exclamation-triangle" aria-hidden="true"></i><div><strong>Review needed.</strong> This workflow needs approval before launch.</div></div>
            <div class="alert alert-danger d-flex gap-2" role="alert"><i class="bi bi-x-octagon" aria-hidden="true"></i><div><strong>Export failed.</strong> Try again or contact support if the issue continues.</div></div>
            <div class="alert alert-info d-flex gap-2 mb-0" role="status"><i class="bi bi-info-circle" aria-hidden="true"></i><div><strong>Maintenance notice.</strong> A scheduled maintenance window starts tonight.</div></div>
          </div>
        </article>
      </div>
      <div class="col-xl-4">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-success mb-3">Best Practice</span>
          <h2 class="h5">Writing Alerts</h2>
          <ul class="athena-check-list mb-0">
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Say what happened, why it matters, and what to do next.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Use <code>role="status"</code> for polite updates and <code>role="alert"</code> for urgent errors.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Do not rely on colour alone; include text and icons where useful.</span></li>
          </ul>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-warning mb-3">Dismissible</span>
          <h2 class="h5">Dismissible Alert</h2>
          <p class="text-secondary">Dismissible alerts need a labelled close button and should not hide information the user must act on later.</p>
          <div class="alert alert-warning alert-dismissible fade show mb-0" role="alert">
            <strong>Payment method expiring.</strong> Update the card before the next renewal.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Dismiss payment method warning"></button>
          </div>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-info mb-3">Form Feedback</span>
          <h2 class="h5">Validation Summary</h2>
          <p class="text-secondary">For forms, place a short summary before the fields and keep field-level messages near each input.</p>
          <div class="alert alert-danger" role="alert">
            <h3 class="h6">Check 2 fields</h3>
            <ul class="mb-0">
              <li>Use a work email address.</li>
              <li>Choose at least one permission group.</li>
            </ul>
          </div>
          <p class="small text-secondary mb-0">Backend validation must still encode user input and return safe, useful errors.</p>
        </article>
      </div>
      <div class="col-12">
        <article class="athena-card p-4">
          <div class="row g-3 align-items-center">
            <div class="col-lg-8">
              <span class="badge text-bg-secondary mb-3">Assurance Note</span>
              <h2 class="h5">Accessibility And Security Limits</h2>
              <p class="text-secondary mb-0">These examples support good frontend patterns, but they are not a WCAG 2.2 conformance claim or an OWASP assurance. Manual keyboard, screen reader, contrast, zoom, target-size, and backend security testing are still required after integration.</p>
            </div>
            <div class="col-lg-4 text-lg-end">
              <a class="btn btn-outline-primary" href="../docs/accessibility.html">Read Accessibility Notes</a>
            </div>
          </div>
        </article>
      </div>
    </section>