Toasts — Lumora

Living Documentation

Toast patterns for async confirmations, warnings, and transient workflow feedback

Use toasts for short-lived status communication that should not interrupt task flow. This page standardizes toast tone, position, timeout behavior, and stacked-notification rhythm across Lumora.

Intent variants Positioning matrix Live playground Copy-ready snippets

Catalog Blocks 6 Variants, placement, state, composition, snippets, playground

Intent Tones 5 Default, success, warn, danger, and info variants

Position Presets 5 Top/end, top/center, bottom/end, bottom/center, center

Preview State Top End — Success Updates live from playground controls

1. Variant Matrix

Toast styling by intent with lightweight visual hierarchy

Your dashboard filters were saved.

Invoice was sent successfully.

Storage is at 90% capacity.

Could not sync the latest records.

2. Interaction Playground

Tune tone, position, and autohide behavior for a live toast preview

Position

Intent

Auto-hide Delay (ms)

Auto hide

Show icon

Show action button

The preview updates its Bootstrap toast instance whenever a control changes.

Live Output

Top End Success

Top end, success tone, auto-hide enabled.

Use this trigger after tweaking controls.

3. Placement and Stacking

Positioning should align with nearby controls and avoid obstructing high-priority content

Placement guidance

Use top-end for system confirmations and lightweight success feedback.
Use bottom-center for mobile contexts where thumbs can dismiss quickly.
Use middle-center sparingly for critical short-lived alerts.

4. State Modeling

Autohide, manual close, and action affordances decide whether a toast is informative or task-driving

Autohide + passive status

Persistent toast with action

5. Composition Patterns

Use in imports, async saves, background jobs, and queued operations

Background sync notification

Toasts are ideal for non-blocking updates like “job completed”, “filters saved”, or “cache refreshed”.

Action acknowledgment

If undo is available, add a short inline action and disable autohide until user dismisses or acts.

6. Real-use Snippets

Copy-ready toast markup and initialization patterns

Auto-hide Toast

<div class="toast-container position-fixed top-0 end-0 p-3">
  <div id="statusToast" class="toast toast-lumora toast-lumora--success" role="status">
    <div class="toast-header">
      <strong class="me-auto">Synced</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">Dashboard updated successfully.</div>
  </div>
</div>

<script>
  const toast = new bootstrap.Toast(document.getElementById("statusToast"), { autohide: true, delay: 2600 });
  toast.show();
</script>

Persistent Action Toast

<div class="toast toast-lumora toast-lumora--warn" data-bs-autohide="false">
  <div class="toast-header">
    <strong class="me-auto">Queued task</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body d-flex justify-content-between align-items-center">
    Export is running in background.
    <button class="btn btn-sm btn-outline">View</button>
  </div>
</div>

Position Helpers

top-end        => top-0 end-0
top-center     => top-0 start-50 translate-middle-x
bottom-end     => bottom-0 end-0
bottom-center  => bottom-0 start-50 translate-middle-x
middle-center  => top-50 start-50 translate-middle