|$ curl https://forge-ai.dev/api/markdown?path=docs/components/badges
$cat docs/badges-&-tags.md
updated Recently·10 min read·published
Badges & Tags
◆CSS◆HTML◆UI◆Beginner
12+ badge and tag examples — variants, sizes, dots, counts, removable chips, and status indicators.
Color Variants
Six color variants for different semantic meanings.
badge-variants
Live
untitled.html
HTML
| 1 | <div class="g"> |
| 2 | <span class="b primary"> |
| 3 | Primary |
| 4 | </span> |
| 5 | <span class="b success"> |
| 6 | Success |
| 7 | </span> |
| 8 | <span class="b warning"> |
| 9 | Warning |
| 10 | </span> |
| 11 | <span class="b danger"> |
| 12 | Danger |
| 13 | </span> |
| 14 | <span class="b info"> |
| 15 | Info |
| 16 | </span> |
| 17 | <span class="b neutral"> |
| 18 | Neutral |
| 19 | </span> |
| 20 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .g { |
| 13 | display:flex; |
| 14 | flex-wrap:wrap; |
| 15 | gap:10px; |
| 16 | justify-content:center; |
| 17 | padding:24px |
| 18 | } |
| 19 | .b { |
| 20 | padding:4px 12px; |
| 21 | border-radius:999px; |
| 22 | font-size:11px; |
| 23 | font-weight:600; |
| 24 | line-height:1.5 |
| 25 | } |
| 26 | .primary { |
| 27 | background:rgba(0, |
| 28 | 255, |
| 29 | 65, |
| 30 | .12); |
| 31 | color:#00FF41 |
| 32 | } |
| 33 | .success { |
| 34 | background:rgba(34, |
| 35 | 197, |
| 36 | 94, |
| 37 | .12); |
| 38 | color:#22C55E |
| 39 | } |
| 40 | .warning { |
| 41 | background:rgba(234, |
| 42 | 179, |
| 43 | 8, |
| 44 | .12); |
| 45 | color:#EAB308 |
| 46 | } |
| 47 | .danger { |
| 48 | background:rgba(239, |
| 49 | 68, |
| 50 | 68, |
| 51 | .12); |
| 52 | color:#EF4444 |
| 53 | } |
| 54 | .info { |
| 55 | background:rgba(59, |
| 56 | 130, |
| 57 | 246, |
| 58 | .12); |
| 59 | color:#3B82F6 |
| 60 | } |
| 61 | .neutral { |
| 62 | background:rgba(160, |
| 63 | 160, |
| 64 | 160, |
| 65 | .12); |
| 66 | color:#A0A0A0 |
| 67 | } |
Outline Variants
Outline badges with border-only styling for a lighter visual footprint.
badge-outline
Live
untitled.html
HTML
| 1 | <div class="g"> |
| 2 | <span class="b primary"> |
| 3 | Primary |
| 4 | </span> |
| 5 | <span class="b success"> |
| 6 | Success |
| 7 | </span> |
| 8 | <span class="b warning"> |
| 9 | Warning |
| 10 | </span> |
| 11 | <span class="b danger"> |
| 12 | Danger |
| 13 | </span> |
| 14 | <span class="b info"> |
| 15 | Info |
| 16 | </span> |
| 17 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .g { |
| 13 | display:flex; |
| 14 | flex-wrap:wrap; |
| 15 | gap:10px; |
| 16 | justify-content:center; |
| 17 | padding:24px |
| 18 | } |
| 19 | .b { |
| 20 | padding:4px 12px; |
| 21 | border-radius:999px; |
| 22 | font-size:11px; |
| 23 | font-weight:600; |
| 24 | line-height:1.5; |
| 25 | background:transparent; |
| 26 | border:1.5px solid |
| 27 | } |
| 28 | .primary { |
| 29 | color:#00FF41; |
| 30 | border-color:#00FF41 |
| 31 | } |
| 32 | .success { |
| 33 | color:#22C55E; |
| 34 | border-color:#22C55E |
| 35 | } |
| 36 | .warning { |
| 37 | color:#EAB308; |
| 38 | border-color:#EAB308 |
| 39 | } |
| 40 | .danger { |
| 41 | color:#EF4444; |
| 42 | border-color:#EF4444 |
| 43 | } |
| 44 | .info { |
| 45 | color:#3B82F6; |
| 46 | border-color:#3B82F6 |
| 47 | } |
Sizes
Small, default, and large badges.
badge-sizes
Live
untitled.html
HTML
| 1 | <div class="g"> |
| 2 | <span class="b sm"> |
| 3 | Small |
| 4 | </span> |
| 5 | <span class="b md"> |
| 6 | Default |
| 7 | </span> |
| 8 | <span class="b lg"> |
| 9 | Large |
| 10 | </span> |
| 11 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .g { |
| 13 | display:flex; |
| 14 | flex-wrap:wrap; |
| 15 | gap:12px; |
| 16 | align-items:center; |
| 17 | justify-content:center; |
| 18 | padding:24px |
| 19 | } |
| 20 | .b { |
| 21 | border-radius:999px; |
| 22 | font-weight:600; |
| 23 | background:rgba(0, |
| 24 | 255, |
| 25 | 65, |
| 26 | .12); |
| 27 | color:#00FF41 |
| 28 | } |
| 29 | .sm { |
| 30 | padding:2px 8px; |
| 31 | font-size:9px |
| 32 | } |
| 33 | .md { |
| 34 | padding:4px 12px; |
| 35 | font-size:11px |
| 36 | } |
| 37 | .lg { |
| 38 | padding:6px 16px; |
| 39 | font-size:13px |
| 40 | } |
Dot Badges
Status indicator dots — online, offline, away, busy.
badge-dot
Live
untitled.html
HTML
| 1 | <div class="g"> |
| 2 | <span class="dot on"> |
| 3 | </span> |
| 4 | <span class="label"> |
| 5 | Online |
| 6 | </span> |
| 7 | <span class="dot off"> |
| 8 | </span> |
| 9 | <span class="label"> |
| 10 | Offline |
| 11 | </span> |
| 12 | <span class="dot away"> |
| 13 | </span> |
| 14 | <span class="label"> |
| 15 | Away |
| 16 | </span> |
| 17 | <span class="dot busy"> |
| 18 | </span> |
| 19 | <span class="label"> |
| 20 | Busy |
| 21 | </span> |
| 22 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .g { |
| 13 | display:flex; |
| 14 | flex-wrap:wrap; |
| 15 | gap:12px; |
| 16 | align-items:center; |
| 17 | justify-content:center; |
| 18 | padding:24px |
| 19 | } |
| 20 | .dot { |
| 21 | width:10px; |
| 22 | height:10px; |
| 23 | border-radius:50%; |
| 24 | display:inline-block |
| 25 | } |
| 26 | .on { |
| 27 | background:#22C55E; |
| 28 | box-shadow:0 0 6px rgba(34, |
| 29 | 197, |
| 30 | 94, |
| 31 | .5) |
| 32 | } |
| 33 | .off { |
| 34 | background:#525252 |
| 35 | } |
| 36 | .away { |
| 37 | background:#EAB308; |
| 38 | box-shadow:0 0 6px rgba(234, |
| 39 | 179, |
| 40 | 8, |
| 41 | .5) |
| 42 | } |
| 43 | .busy { |
| 44 | background:#EF4444; |
| 45 | box-shadow:0 0 6px rgba(239, |
| 46 | 68, |
| 47 | 68, |
| 48 | .5) |
| 49 | } |
| 50 | .label { |
| 51 | font-size:12px; |
| 52 | color:#A0A0A0; |
| 53 | font-weight:500 |
| 54 | } |
Count Badges
Notification counts positioned on icons and buttons.
badge-count
Live
untitled.html
HTML
| 1 | <div class="g"> |
| 2 | <div class="icon-wrap"> |
| 3 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" style="color:#A0A0A0"> |
| 4 | <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/> |
| 5 | <path d="M13.73 21a2 2 0 0 1-3.46 0"/> |
| 6 | </svg> |
| 7 | <span class="count"> |
| 8 | 3 |
| 9 | </span> |
| 10 | </div> |
| 11 | <div class="icon-wrap"> |
| 12 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" style="color:#A0A0A0"> |
| 13 | <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/> |
| 14 | <path d="M12 6v6l4 2"/> |
| 15 | </svg> |
| 16 | <span class="count dot-only"> |
| 17 | </span> |
| 18 | </div> |
| 19 | <button class="btn"> |
| 20 | Inbox |
| 21 | <span class="c"> |
| 22 | 12 |
| 23 | </span> |
| 24 | </button> |
| 25 | </div> |
untitled.css
CSS
| 1 | .g { |
| 2 | display:flex; |
| 3 | gap:32px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .icon-wrap { |
| 9 | position:relative |
| 10 | } |
| 11 | .count { |
| 12 | position:absolute; |
| 13 | top:-6px; |
| 14 | right:-8px; |
| 15 | min-width:18px; |
| 16 | height:18px; |
| 17 | padding:0 5px; |
| 18 | border-radius:9px; |
| 19 | background:#EF4444; |
| 20 | color:#fff; |
| 21 | font-size:10px; |
| 22 | font-weight:700; |
| 23 | display:flex; |
| 24 | align-items:center; |
| 25 | justify-content:center; |
| 26 | line-height:1; |
| 27 | box-shadow:0 2px 4px rgba(0, |
| 28 | 0, |
| 29 | 0, |
| 30 | .3) |
| 31 | } |
| 32 | .dot-only { |
| 33 | min-width:10px; |
| 34 | height:10px; |
| 35 | padding:0; |
| 36 | right:-4px; |
| 37 | top:-2px; |
| 38 | border-radius:50%; |
| 39 | background:#EF4444 |
| 40 | } |
| 41 | .btn { |
| 42 | display:inline-flex; |
| 43 | align-items:center; |
| 44 | gap:8px; |
| 45 | padding:8px 16px; |
| 46 | border-radius:8px; |
| 47 | font-size:12px; |
| 48 | font-weight:600; |
| 49 | font-family:system-ui, |
| 50 | sans-serif; |
| 51 | cursor:pointer; |
| 52 | border:1px solid #2A2A3E; |
| 53 | background:#1A1A2E; |
| 54 | color:#E0E0E0 |
| 55 | } |
| 56 | .c { |
| 57 | background:rgba(0, |
| 58 | 255, |
| 59 | 65, |
| 60 | .15); |
| 61 | color:#00FF41; |
| 62 | padding:2px 7px; |
| 63 | border-radius:999px; |
| 64 | font-size:10px; |
| 65 | font-weight:700 |
| 66 | } |
Pill Badges
Rounded pill badges with gradient and glow effects.
pill-badges
Live
untitled.html
HTML
| 1 | <div class="g"> |
| 2 | <span class="b gradient"> |
| 3 | Premium |
| 4 | </span> |
| 5 | <span class="b glow"> |
| 6 | New |
| 7 | </span> |
| 8 | <span class="b glass"> |
| 9 | Beta |
| 10 | </span> |
| 11 | <span class="b border"> |
| 12 | Pro |
| 13 | </span> |
| 14 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0D0D0D; |
| 10 | padding:24px |
| 11 | } |
| 12 | .g { |
| 13 | display:flex; |
| 14 | flex-wrap:wrap; |
| 15 | gap:12px; |
| 16 | justify-content:center; |
| 17 | padding:24px |
| 18 | } |
| 19 | .b { |
| 20 | padding:5px 16px; |
| 21 | border-radius:999px; |
| 22 | font-size:11px; |
| 23 | font-weight:700; |
| 24 | line-height:1.5 |
| 25 | } |
| 26 | .gradient { |
| 27 | background:linear-gradient(135deg, |
| 28 | #00FF41, |
| 29 | #00BFFF); |
| 30 | color:#0A0A0A |
| 31 | } |
| 32 | .glow { |
| 33 | background:#00FF41; |
| 34 | color:#0A0A0A; |
| 35 | box-shadow:0 0 12px rgba(0, |
| 36 | 255, |
| 37 | 65, |
| 38 | .4) |
| 39 | } |
| 40 | .glass { |
| 41 | background:rgba(255, |
| 42 | 255, |
| 43 | 255, |
| 44 | .08); |
| 45 | color:#E0E0E0; |
| 46 | backdrop-filter:blur(8px); |
| 47 | border:1px solid rgba(255, |
| 48 | 255, |
| 49 | 255, |
| 50 | .1) |
| 51 | } |
| 52 | .border { |
| 53 | background:transparent; |
| 54 | color:#00FF41; |
| 55 | border:1.5px solid #00FF41; |
| 56 | box-shadow:0 0 0 1px rgba(0, |
| 57 | 255, |
| 58 | 65, |
| 59 | .2) |
| 60 | } |