Badges — Lumora

Living Documentation

Status badges, count pills and contextual chips for compact UI communication

This page standardizes micro-label patterns for states and counters. Explore solid, soft and outline modes, badge shapes and notification dots, then compose your own recipe in the live playground.

Variant matrix Dot + counter styles Live controls Copy-ready snippets

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

Badge 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 badge style grid for each intent

Solid

PRIMARY SUCCESS WARNING DANGER INFO

Soft

NEW ACTIVE PENDING BLOCKED BETA

Outline

v2.1 DEPLOYED REVIEW FAILED NOTICE

2. Interaction Playground

Generate a live badge recipe from controls

Style

Intent

Size

Rect shape

Leading dot

Leading icon

Live Output

Soft Warning

3. Shape and Density

Pill vs rectangle, small to large density scale

Size Scale

SM MD LG

Pill + Rect

PILL RECT INFO

4. Status and State

Dot, icon and neutral-status communication patterns

Dot Badges

ONLINE DEGRADED OFFLINE

Icon Badges

VERIFIED WAITING REVOKED

5. Composition Patterns

Badge usage in nav, chips, notifications and cards

Menu + Notification count

Filter chips

Region: APAC 24 Priority High

6. Real-use Snippets

Copy-ready snippets for nav, cards and table rows

Status Dot Badge

<span class="badge-lumora badge-lumora--soft-success">
  <span class="badge-dot"></span> ONLINE
</span>

Button Counter Badge

<button class="btn btn-outline btn-sm" type="button">
  Inbox
  <span class="badge-lumora badge-lumora--solid-danger badge-lumora--sm">12</span>
</button>

Icon Badge

<span class="badge-lumora badge-lumora--solid-warning">
  <i class="fa-solid fa-hourglass-half"></i> WAITING
</span>