Badge

Small status label for counts and states. Variants map to classes; success and warning extend the core set.

INSTALL

1pnpm dlx @sayagodev/mo add badge

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/badge.css";

EXAMPLES

Variants

Default Secondary Destructive Outline Ghost

1<div class="hstack gap-2">2  <span class="badge">Default</span>3  <span class="badge" data-variant="secondary">Secondary</span>4  <span class="badge" data-variant="destructive">Destructive</span>5  <span class="badge outline">Outline</span>6  <span class="badge ghost">Ghost</span>7</div>8

Custom colors

Blue Green Sky Purple Red

1<div class="hstack gap-2">2  <span class="badge" style="background-color: light-dark(#eff6ff, #172554); color: light-dark(#1d4ed8, #93c5fd)">Blue</span>3  <span class="badge" style="background-color: light-dark(#f0fdf4, #052e16); color: light-dark(#15803d, #86efac)">Green</span>4  <span class="badge" style="background-color: light-dark(#f0f9ff, #082f49); color: light-dark(#0369a1, #7dd3fc)">Sky</span>5  <span class="badge" style="background-color: light-dark(#faf5ff, #3b0764); color: light-dark(#7e22ce, #d8b4fe)">Purple</span>6  <span class="badge" style="background-color: light-dark(#fef2f2, #450a0a); color: light-dark(#b91c1c, #fca5a5)">Red</span>7</div>8

Status extensions

Active Pending Failed

1<div class="hstack gap-2">2  <span class="badge" data-variant="success">Active</span>3  <span class="badge" data-variant="warning">Pending</span>4  <span class="badge outline" data-variant="destructive">Failed</span>5</div>6

With icon

Verified Bookmark

1<div class="hstack gap-2">2  <span class="badge" data-variant="secondary">3    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-icon="inline-start"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" /><path d="m9 12 2 2 4-4" /></svg>4    Verified5  </span>6  <span class="badge outline">7    Bookmark8    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-icon="inline-end"><path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" /></svg>9  </span>10</div>11

Link

Open Link

1<a class="badge" href="#">2  Open Link3  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-icon="inline-end"><path d="M7 7h10v10" /><path d="M7 17 17 7" /></svg>4</a>5

Spinner

Deleting Generating

1<div class="hstack gap-2">2  <span class="badge" data-variant="destructive">3    <span aria-busy="true" data-spinner="small" data-icon="inline-start"></span>4    Deleting5  </span>6  <span class="badge" data-variant="secondary">7    Generating8    <span aria-busy="true" data-spinner="small" data-icon="inline-end"></span>9  </span>10</div>11

RTL

شارة ثانوي مدمر مخطط متحقق إشارة مرجعية

1<div dir="rtl" class="hstack gap-2 justify-center">2  <span class="badge">شارة</span>3  <span class="badge" data-variant="secondary">ثانوي</span>4  <span class="badge" data-variant="destructive">مدمر</span>5  <span class="badge outline">مخطط</span>6  <span class="badge" data-variant="secondary">7    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-icon="inline-start"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" /><path d="m9 12 2 2 4-4" /></svg>8    متحقق9  </span>10  <span class="badge outline">11    إشارة مرجعية12    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-icon="inline-end"><path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" /></svg>13  </span>14</div>15

Demo

Badge Secondary Destructive Outline

1<div class="hstack gap-2 justify-center">2  <span class="badge">Badge</span>3  <span class="badge" data-variant="secondary">Secondary</span>4  <span class="badge" data-variant="destructive">Destructive</span>5  <span class="badge outline">Outline</span>6</div>7

USAGE

1<span class="badge">Primary</span>2<span class="badge outline">Outline</span>3<span class="badge ghost">Ghost</span>4<a class="badge link" href="#">Link</a>5<span class="badge" data-variant="secondary|destructive|success|warning">…</span>

API

NAMEKINDDESCRIPTION

[data-variant]attributesecondary · destructive (translucent bg-destructive/10, like shadcn base) · success · warning extensions

.outline .ghost .linkclassSurface variants like Button; hover text uses muted-foreground (shadcn base)

.rounded-fullclassOpt-in pill (default radius is rounded-2xl = 16px, like shadcn base)

--mo-badge-*tokenpadding-x/y and radius hooks

FILES

src/css/badge.css

Install:mo add badge

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--border--destructive--foreground--muted--muted-foreground--primary--primary-foreground--radius--secondary--secondary-foreground

Component hooks

--mo-badge-padding-x--mo-badge-padding-y--mo-badge-radius

Preview

Default Secondary Destructive Outline Ghost

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.