Alerts — Lumora

Living Documentation

Alert patterns for status communication, risk signaling and in-flow feedback

This page standardizes how Lumora surfaces system state. Browse solid/soft/outline variants, test dismissible and compact modes, explore actionable banners, and generate copy-ready markup from the playground.

Variant matrix Live controls Action links Dismiss patterns

Catalog Blocks 6 Variants, playground, states, composition, snippets

Alert Styles 3 Solid, Soft, Outline

Intent Palette 5 Primary, Success, Warning, Danger, Info

Preview State Soft - Warning Updates from playground toggles

1. Variant Matrix

Canonical alert styles mapped to each semantic intent

Solid

System update completed successfully.

Backup finished and was verified.

Subscription expires in 3 days.

Payment failed. Retry required.

New API changelog available.

Soft

Primary soft message for neutral updates.

Deployment succeeded. Traffic is stable.

Quota crossed 85%. Consider scaling.

Security scan detected 2 critical findings.

Maintenance window starts at 02:00 UTC.

Outline

Preview mode is active for this tenant.

All health checks are passing.

Large import may take several minutes.

Access token revoked unexpectedly.

Try the new report builder from Labs.

2. Interaction Playground

Build an alert recipe from interactive controls

Style

Intent

Dismissible

Leading icon

Title line

Compact spacing

Live Output

Soft Warning

3. Dismiss + Actions

Patterns for acknowledgement flows and contextual links

Dismissible Alert

Heads up: Refresh to pull the latest deployment logs.

Alert with Actions

Storage Warning: Usage reached 92% of your current plan.

Open billing View cleanup tips

4. Banner Patterns

Inline banners for top-of-section or system-wide messages

Top Banner with CTA

Inline Form Alert

Validation Error: Please fix highlighted fields before submitting.

5. Contextual Composition

Embed alerts inside cards, tables and workflows

Inside analytics card

Monthly Revenue

Forecast model updated using Apr 2026 data.

Above data table

3 suspicious login attempts detected in the last hour.

6. Real-use Snippets

Copy-ready snippets for cards, forms and global notifications

Soft Dismissible Alert

<div class="alert-lumora alert-lumora--soft-warning" role="alert">
  <div class="alert-lumora__line">
    <span class="alert-lumora__icon"><i class="fa-solid fa-triangle-exclamation"></i></span>
    <span><span class="alert-lumora__title">Quota Warning:</span> Usage reached 92%.</span>
  </div>
  <button class="alert-lumora__dismiss" type="button" aria-label="Dismiss">
    <i class="fa-solid fa-xmark"></i>
  </button>
</div>

Inline Form Alert

<div class="alert-lumora alert-lumora--outline-danger alert-lumora--compact" role="alert">
  <div class="alert-lumora__line">
    <span class="alert-lumora__icon"><i class="fa-solid fa-circle-xmark"></i></span>
    <span>Please correct the highlighted fields before continuing.</span>
  </div>
</div>

Action Banner

<div class="banner-alert" role="status">
  <div class="banner-alert__line">
    <strong>Maintenance:</strong> Read-only mode starts at 01:30 UTC.
  </div>
  <button class="btn btn-outline btn-sm" type="button">View timeline</button>
</div>