Notifications - Lumora

Living Documentation

Toastr-style notifications for fast feedback without blocking workflow

Use lightweight notifications for completed actions, passive system updates, and recoverable warnings. The playground controls intensity, placement, stack density, dismiss affordance, and progress timing so product flows stay informative without becoming noisy.

Passive updates Stack management Placement presets Copy-ready snippets

Catalog Blocks 6 Variants, playground, timing, placement, governance, snippets

Intent Modes 4 Success, Info, Warning, and Danger feedback

Placement Modes 4 Top-left, top-right, bottom-left, bottom-right

Preview State Info - top-right Updated live from the playground

1. Variant Matrix

Notification tone and behavior by use case

Positive and informational updates

Warning and error updates

2. Stack Playground

Build a notification recipe from live controls

Intent

Placement

Visible stack

Show dismiss button

Show progress meter

Live Output

Info Top right

Info notification stack pinned to the top right with two visible items.

Use copy recipe for the generated snippet.

3. Timing & Persistence

Choose auto-dismiss rules by interruption cost

Auto-dismiss guidance

Success and info notifications should dismiss automatically.
Warning notifications may persist until acknowledged in high-risk flows.
Errors should stay visible long enough to support recovery.

Avoid notification fatigue

Group repeated updates into a stack or digest.
Limit burst frequency for background sync events.
Escalate only when the user must act.

4. Placement Rules

Pin to corners that avoid covering primary actions

Top edge placements

Best for desktop dashboards where quick visibility matters and topbar actions remain unobstructed.

Bottom edge placements

Best for mobile and dense tables where header filters should remain visible.

5. Governance & Accessibility

Define when notifications escalate, stack, or stay silent

Screen reader guidance

Use `role="status"` for passive updates and avoid firing multiple live regions at once.

Escalation ladder

Promote from inline helper text to toast-style notifications, then to modal prompts only when recovery requires explicit action.

6. Real-use Snippets

Copy-ready notification markup and stack presets

Single Success Toast

<div class="notify-card notify-card--success" role="status">
  <div class="notify-card__head">
    <div class="notify-card__main">
      <span class="notify-card__icon"><i class="fa-solid fa-check"></i></span>
      <div>
        <h4 class="notify-card__title">Saved</h4>
        <p class="notify-card__text">Workspace settings synced to the cloud.</p>
      </div>
    </div>
  </div>
</div>

Stack Container

<div class="notify-stack notify-stack--top-right">
  <!-- 1..3 notify-card items -->
</div>

Intent Utility

success -> notify-card--success
info    -> notify-card--info
warn    -> notify-card--warn
danger  -> notify-card--danger