🏷️ Badges & Tags
7 badge & tag sets — copy-ready HTML + CSS
7 components. Pick one, check it in Preview, open Code to read it, then Copy code — you get the complete HTML and its CSS in one self-contained snippet, so it pastes in looking exactly like the preview.
HTML + CSS · self-contained15 lines
<div class="nxg1">
<span class="nxg1-b nxg1-ok">Active</span>
<span class="nxg1-b nxg1-warn">Pending</span>
<span class="nxg1-b nxg1-err">Closed</span>
<span class="nxg1-b nxg1-info">In review</span>
<span class="nxg1-b">Draft</span>
</div>
<style>
.nxg1 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg1-b { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #f1ebe2; color: #5e503f; font: 600 13px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg1-ok { background: #e3f1e1; color: #2e6b2a; }
.nxg1-warn { background: #fdf0dc; color: #94550a; }
.nxg1-err { background: #fbe4e4; color: #a12b2b; }
.nxg1-info { background: #e3ecfb; color: #2a4f9a; }
</style>
HTML + CSS · self-contained14 lines
<ul class="nxg2" aria-label="Topics">
<li><a href="#">JavaScript</a></li>
<li><a href="#">React</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Performance</a></li>
</ul>
<style>
.nxg2 { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg2 a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid #d4c5a9; border-radius: 10px; background: #faf6f0; color: #2a1f1a; font: 500 14px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; text-decoration: none; transition: background .2s, border-color .2s; }
.nxg2 a::before { content: "#"; margin-right: 3px; color: #a24832; font-weight: 700; }
.nxg2 a:hover { background: #f3e2d9; border-color: #a24832; }
.nxg2 a:focus-visible { outline: 3px solid #e8b48a; outline-offset: 2px; }
</style>
HTML + CSS · self-contained14 lines
<div class="nxg3">
<span class="nxg3-s"><i class="nxg3-on"></i>Online</span>
<span class="nxg3-s"><i class="nxg3-away"></i>Away</span>
<span class="nxg3-s"><i class="nxg3-busy"></i>Do not disturb</span>
<span class="nxg3-s"><i></i>Offline</span>
</div>
<style>
.nxg3 { display: flex; flex-wrap: wrap; gap: 10px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg3-s { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid #ece4d8; border-radius: 999px; background: #fff; color: #2a1f1a; font: 500 13.5px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg3-s i { width: 9px; height: 9px; border-radius: 50%; background: #b5aca0; }
.nxg3-s i.nxg3-on { background: #3aa65a; box-shadow: 0 0 0 3px rgba(58,166,90,.18); }
.nxg3-s i.nxg3-away { background: #e0a224; }
.nxg3-s i.nxg3-busy { background: #d64545; }
</style>
HTML + CSS · self-contained19 lines
<div class="nxg4">
<button type="button" class="nxg4-icon" aria-label="Messages, 3 unread">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v11H8l-4 4z"/></svg>
<span class="nxg4-count">3</span>
</button>
<button type="button" class="nxg4-icon" aria-label="Notifications, 99+ new">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15zM10 20a2 2 0 0 0 4 0"/></svg>
<span class="nxg4-count">99+</span>
</button>
<span class="nxg4-pill">Inbox <b>12</b></span>
</div>
<style>
.nxg4 { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding-top: 6px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg4-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid #ece4d8; border-radius: 12px; background: #fff; color: #2a1f1a; cursor: pointer; }
.nxg4-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.nxg4-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 999px; background: #d64545; color: #fff; font: 700 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg4-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px; background: #2a1f1a; color: #faf6f0; font: 600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg4-pill b { padding: 4px 9px; border-radius: 999px; background: #faf6f0; color: #2a1f1a; font-size: 12px; }
</style>
HTML + CSS · self-contained12 lines
<div class="nxg5" aria-label="Active filters">
<span class="nxg5-chip">Design <button type="button" aria-label="Remove Design">×</button></span>
<span class="nxg5-chip">Under $50 <button type="button" aria-label="Remove Under $50">×</button></span>
<span class="nxg5-chip">In stock <button type="button" aria-label="Remove In stock">×</button></span>
</div>
<style>
.nxg5 { display: flex; flex-wrap: wrap; gap: 8px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg5-chip { display: inline-flex; align-items: center; height: 40px; padding-left: 14px; border-radius: 999px; background: #f3e2d9; color: #6b2a1a; font: 600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg5-chip button { width: 38px; height: 40px; padding: 0; border: 0; border-radius: 0 999px 999px 0; background: transparent; color: inherit; font: 400 20px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxg5-chip button:hover { background: rgba(107,42,26,.1); }
.nxg5-chip button:focus-visible { outline: 3px solid #e8b48a; outline-offset: -3px; }
</style>
HTML + CSS · self-contained16 lines
<div class="nxg6">
<span class="nxg6-b nxg6-solid">Solid</span>
<span class="nxg6-b nxg6-soft">Soft</span>
<span class="nxg6-b nxg6-outline">Outline</span>
<span class="nxg6-b nxg6-solid nxg6-sq">Square</span>
<span class="nxg6-b nxg6-soft nxg6-lg">Large</span>
</div>
<style>
.nxg6 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg6-b { display: inline-block; padding: 4px 11px; border: 1.5px solid transparent; border-radius: 999px; font: 700 12px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: .03em; }
.nxg6-solid { background: #a24832; color: #fff; }
.nxg6-soft { background: #f3e2d9; color: #8a3a27; }
.nxg6-outline { border-color: #a24832; color: #a24832; }
.nxg6-sq { border-radius: 6px; }
.nxg6-lg { padding: 7px 16px; font-size: 14px; }
</style>
HTML + CSS · self-contained13 lines
<div class="nxg7">
<div class="nxg7-row">Smart search <span class="nxg7-new">New</span></div>
<div class="nxg7-row">Team spaces <span class="nxg7-beta">Beta</span></div>
<div class="nxg7-row">Custom domains <span class="nxg7-pro">★ Pro</span></div>
</div>
<style>
.nxg7 { display: grid; gap: 10px; width: 100%; max-width: 360px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg7-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid #ece4d8; border-radius: 12px; background: #fff; color: #2a1f1a; font: 500 15px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxg7-new, .nxg7-beta, .nxg7-pro { padding: 3px 10px; border-radius: 999px; font: 700 11px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.nxg7-new { background: linear-gradient(135deg, #e0603a, #a24832); color: #fff; }
.nxg7-beta { background: #e3ecfb; color: #2a4f9a; border: 1px dashed #7d9be0; }
.nxg7-pro { background: #2a1f1a; color: #f2c46d; }
</style>
Class names carry a unique prefix, so several snippets can sit on one page without clashing. Colours and fonts are plain CSS values — change them to match your brand.
What Is This?
- Gallery of badge and tag UI components
- Includes status, notification, pill, and icon badges
- Multiple color schemes and size options
- Copy HTML and CSS with one click
- Essential for dashboards and content labeling
How to Use
- Browse the badge and tag design collection
- Preview badges at different sizes and color schemes
- Copy the HTML and CSS for any badge style
- Customize colors, text, and icon combinations
- Use badges in navigation, cards, and list items
Use Cases
- Adding status indicators to dashboards and admin panels
- Creating notification counters for navigation items
- Building category tags for blog posts and content
- Designing version and release badges for documentation
- Implementing color-coded labels for project management UI