Home/UI Components/Badges & Tags

Badges & Tags

Badge and tag components — status badges, category tags, notification dots, pill labels.

Status Badges

ActivePendingClosedDraft
<span class="badge badge-success">Active</span>
<span class="badge badge-warning">Pending</span>
<span class="badge badge-danger">Closed</span>
<span class="badge badge-default">Draft</span>

<style>
.badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge-success { background: #e8f5e9; color: #2e7d32; }
.badge-warning { background: #fff3e0; color: #ef6c00; }
.badge-danger  { background: #ffebee; color: #c62828; }
.badge-default { background: #f5efe6; color: #70604f; }
</style>

Category Tags

JavaScriptReactCSS
<span class="tag">JavaScript</span>
<span class="tag">React</span>
<span class="tag">CSS</span>

Related Tools You Might Like

UI Components Badges & Tags → UI Components Buttons Collection → UI Components Card Layouts → UI Components Login / Signup Forms →
Ad Slot — Mid Content (Responsive In-Article)
💡

What Is This?

🛠️

How to Use

  1. Browse the extended badge and tag designs
  2. Preview animations and interactive dismiss actions
  3. Copy the complete HTML and CSS code
  4. Customize colors, shapes, and animation styles
  5. Combine badges with other UI components
🎯

Use Cases

Ad Slot — Bottom (300×250 Rectangle)