Badge ​

Bootstrap

Bootstrap badge + text-bg-*. Modifiers and examples below; usage → Rules.

Tones ​

  • Status: text-bg-success, warning, danger, info. text-bg-neutral is Sqrl custom (Colors).
  • UI chips: text-bg-secondary, light, dark (strong fill).
  • Class order: badge, then badge-* modifiers, then text-bg-*.
DoneTodayOverdueScheduledOpenLightDarkSecondary
html
<span class="badge text-bg-success">Done</span>
<span class="badge text-bg-warning">Today</span>
<span class="badge text-bg-danger">Overdue</span>
<span class="badge text-bg-info">Scheduled</span>
<span class="badge text-bg-neutral">Open</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>
<span class="badge text-bg-secondary">Secondary</span>

Accents ​

Sqrl custom

Decorative only: text-bg-accent-* — see Colors — Accents.

TealTerracottaSlateTaupeViolet
html
<span class="badge text-bg-accent-teal">Teal</span>
<span class="badge text-bg-accent-terracotta">Terracotta</span>
<span class="badge text-bg-accent-slate">Slate</span>
<span class="badge text-bg-accent-taupe">Taupe</span>
<span class="badge text-bg-accent-violet">Violet</span>

Dotted ​

Sqrl custom

badge-dotted: dot in currentColor — pair with any tone.

DoneTodayOverdueScheduledOpen
html
<span class="badge badge-dotted text-bg-success">Done</span>
<span class="badge badge-dotted text-bg-warning">Today</span>
<span class="badge badge-dotted text-bg-danger">Overdue</span>
<span class="badge badge-dotted text-bg-info">Scheduled</span>
<span class="badge badge-dotted text-bg-neutral">Open</span>

Borderless ​

Sqrl custom

badge-borderless: no border; pair with badge-dotted in dense layouts.

DraftScheduledIn reviewDue soonDoneCancelled
html
<span class="badge badge-borderless badge-dotted text-bg-light">Draft</span>
<span class="badge badge-borderless badge-dotted text-bg-info">Scheduled</span>
<span class="badge badge-borderless badge-dotted text-bg-neutral"
  >In review</span
>
<span class="badge badge-borderless badge-dotted text-bg-warning"
  >Due soon</span
>
<span class="badge badge-borderless badge-dotted text-bg-success">Done</span>
<span class="badge badge-borderless badge-dotted text-bg-danger"
  >Cancelled</span
>

With icon ​

One Bootstrap Icon before the label (inherits colour) — Iconography.

Overdue Completed Needs attention
html
<span class="badge text-bg-warning">
  <i class="bi bi-exclamation-triangle-fill"></i>
  Overdue
</span>
<span class="badge text-bg-success">
  <i class="bi bi-check-circle-fill"></i>
  Completed
</span>
<span class="badge text-bg-danger">
  <i class="bi bi-exclamation-circle-fill"></i>
  Needs attention
</span>

Square ​

Sqrl custom

badge-square: 4px radius for dense table cells.

DoneOverdueOpen
html
<span class="badge badge-square text-bg-success">Done</span>
<span class="badge badge-square text-bg-danger">Overdue</span>
<span class="badge badge-square text-bg-neutral">Open</span>

Rules ​

Meaning ​

  • Never colour alone — always a word, badge-dotted, or icon (Iconography).
  • Status → text-bg-success / warning / danger / info / neutral (Sqrl custom). Accents → decorative only, not semantic status.

Tables ​

Status columns: badge-borderless badge-dotted + tone — see table.

Naming ​

New modifiers: badge-{name} (badge-dotted, badge-square, badge-borderless).