Feedback

Bootstrap

Toast, alert, empty state, and loading placeholders. Markup and examples below; when to use which → Rules. Icons (flat only): Iconography.

Toast

• Markup: toast → toast-header (optional tone icon, strong.me-auto title, btn-close btn-close-sm) + toast-body.
• Show/hide: bootstrap.Toast.getOrCreateInstance(el, { autohide: true, delay: 3000 }).show(); close button needs data-bs-dismiss="toast".
• Tone icons: check-circle-fill + text-success, exclamation-triangle-fill + text-warning, x-circle-fill + text-danger, info-circle-fill + text-info.

Changes saved

Contact details were updated.

Import failed

Assign an owner before activating this step.

<div class="toast-container sq-toast-stack">
  <div class="toast" role="status" aria-live="polite">
    <div class="toast-header">
      <i class="bi bi-check-circle-fill text-success" aria-hidden="true"></i>
      <strong class="me-auto">Changes saved</strong>
      <button
        type="button"
        class="btn-close btn-close-sm"
        data-bs-dismiss="toast"
        aria-label="Close"
      ></button>
    </div>
    <div class="toast-body">Contact details were updated.</div>
  </div>
</div>

Live toast stack

Sqrl custom

Append to toast-container sq-toast-stack on document.body (fixed bottom-right). Docs demo buttons (data-sq-show-toast) are docs-only — do not copy into an app; call bootstrap.Toast yourself.

Alert

• Bootstrap alert + variant: alert-success, alert-warning, alert-danger, alert-info. alert-neutral is Sqrl custom (same family as text-bg-neutral).
• Simple row: d-flex align-items-start gap-2 + icon + text.
• Warning with action: align-items-center, title fw-semibold, detail small text-body, btn btn-sm btn-secondary on the right (not primary).

18 prospects imported from CSV.

12 prospects are missing an owner

Unassigned prospects are not included in flow automation.

Assign an owner before activating this step.

<div class="alert alert-warning d-flex align-items-center gap-2" role="status">
  <i class="bi bi-exclamation-triangle-fill flex-shrink-0 align-self-start"></i>
  <div class="flex-grow-1 min-w-0">
    <div class="fw-semibold">12 prospects are missing an owner</div>
    <div class="small text-body">
      Unassigned prospects are not included in flow automation.
    </div>
  </div>
  <button type="button" class="btn btn-sm btn-secondary flex-shrink-0">
    Assign owners
  </button>
</div>

Neutral

Sqrl custom

alert-neutral — extra tone (not Bootstrap). Same family as text-bg-neutral.

Accents

Sqrl custom

alert-accent-* — same suffixes as Colors — Accents (text-bg-accent-*).

Empty state

State the fact, then the next step. No exclamation marks. One primary action (optional); secondary actions (optional) use btn-secondary.

Centered block in the content area (no card required): icon tile (rounded bg-body-secondary, 3×3rem) + .h2 title + text-muted line + actions.

No tasks yet

Create a task or import follow-ups from a CSV file.

<div class="text-center py-5 mb-0">
  <span
    class="d-inline-flex align-items-center justify-content-center rounded bg-body-secondary text-muted mb-3"
    style="width: 3rem; height: 3rem"
    aria-hidden="true"
  >
    <i class="bi bi-inbox-fill fs-3"></i>
  </span>
  <h4 class="h4 mb-2">No tasks yet</h4>
  <p class="text-muted mb-4">
    Create a task or import follow-ups from a CSV file.
  </p>
  <div class="d-flex justify-content-center gap-2">
    <button type="button" class="btn btn-primary">New task</button>
    <button type="button" class="btn btn-secondary">Import from CSV</button>
  </div>
</div>

Skeleton

• Bootstrap placeholders: placeholder (+ col-* / fixed sizes). Default: placeholder-glow on the loading shell (parent wrapper — Bootstrap animation, no custom CSS).
• Loading shell: aria-hidden="true" until real content replaces it.
• Table-shaped: border overflow-hidden placeholder-glow + flex rows (min-height: 44px); then overflow-hidden + table.table when data arrives — Table.
• Card-shaped: card shadow-sm with card-body placeholder-glow.

<div class="border overflow-hidden placeholder-glow" aria-hidden="true">
  <div
    class="d-flex align-items-center gap-3 px-3 border-bottom"
    style="min-height: 44px"
  >
    <span
      class="placeholder rounded-circle d-inline-block"
      style="width: 28px; height: 28px"
    ></span>
    <span
      class="placeholder d-inline-block"
      style="width: 140px; height: 10px"
    ></span>
    <span
      class="placeholder d-inline-block"
      style="width: 90px; height: 10px"
    ></span>
    <span
      class="placeholder rounded-pill ms-auto d-inline-block"
      style="width: 60px; height: 18px"
    ></span>
  </div>
</div>
<div class="card card-bordered shadow-sm mb-0" aria-hidden="true">
  <div class="card-body placeholder-glow">
    <p class="mb-3">
      <span
        class="placeholder rounded d-inline-block"
        style="width: 40px; height: 40px"
      ></span>
    </p>
    <p class="mb-1"><span class="placeholder placeholder-lg col-7"></span></p>
    <p class="mb-2"><span class="placeholder col-4"></span></p>
    <p class="mb-0"><span class="placeholder col-12"></span></p>
  </div>
</div>

Rules

Toast

• Use after a completed or failed user action (save, import, create, delete) — feedback that can disappear without blocking the page.
• Do not use for ongoing data problems the user must fix while working (use alert). Do not use for an empty list (use empty state).
• Mount in toast-container sq-toast-stack (fixed bottom-right); stack multiple toasts there.
• Default 3s auto-hide via Bootstrap Toast (autohide: true); user can dismiss earlier with btn-close-sm.
• Title past tense; success role="status" / aria-live="polite", error role="alert" / aria-live="assertive".

Alert

• Use for persistent inline messages: import summaries, bulk data warnings, blocking validation on a page region.
• Place above the related content (toolbar, table, form section) — not floating like a toast.
• Do not use for transient “saved” confirmations (use toast).
• Actionable warnings: btn-secondary on the alert (the alert is already the signal; not btn-primary).

Empty state

• Use when a list or panel has zero items and filters are not hiding results — the main content area is otherwise empty.
• Center in that content area; a card wrapper is optional.
• Copy: state the fact, then the next step. No exclamation marks. One primary action; secondary actions use btn-secondary. Tone: Content. Header icon: flat Bootstrap only — Iconography.
• Do not use for load errors or permission failures (use alert or toast as appropriate).

Skeleton

• Use while the real layout is loading (table rows, cards, list) — same shape as the content that replaces it.
• Replace placeholders with real data when ready; remove aria-hidden from the live region.
• Default animation: placeholder-glow on the shell (border panel, card-body, etc.) — Bootstrap markup, not on each placeholder. Do not use placeholder-wave.
• Table data: glow panel → then table.table (often in overflow-hidden) when loaded.