The New CSSBadges
Pill-shaped badges and rectangular tags for status indicators, labels, and categorization. Part of the @thenewcss/badges addon package.
Installation
Install the badges addon via npm or load it from a CDN. Requires the core library.
npm install @thenewcss/badgesColor Variants
The base .badge class creates a pill-shaped label with blue styling. Add a color modifier to change the color scheme.
Preview
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-dark">Dark</span>Sizes
Badges come in three sizes. The default size works for most use cases. Use .badge-sm for compact layouts and .badge-lg for emphasis.
Preview
<span class="badge badge-primary badge-sm">Small</span>
<span class="badge badge-primary">Default</span>
<span class="badge badge-primary badge-lg">Large</span>Outline Badges
Use .badge-outline for a transparent background with a 1px solid border in the current text color.
Preview
<span class="badge badge-outline">Default</span>
<span class="badge badge-primary badge-outline">Primary</span>
<span class="badge badge-danger badge-outline">Danger</span>
<span class="badge badge-success badge-outline">Success</span>
<span class="badge badge-warning badge-outline">Warning</span>Dot Badges
Add .badge-dot to prepend a small circle dot indicator via a ::before pseudo-element.
Preview
<span class="badge badge-dot">Default</span>
<span class="badge badge-primary badge-dot">Primary</span>
<span class="badge badge-danger badge-dot">Danger</span>
<span class="badge badge-success badge-dot">Success</span>
<span class="badge badge-warning badge-dot">Warning</span>Tags
Tags are rectangular labels for categorization. Use .tag for individual tags and .tag-list for a flex container that wraps tags with consistent spacing.
Preview
<div class="tag-list">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
<span class="tag">TypeScript</span>
<span class="tag">React</span>
</div>Class Reference
Base
| Class | Description |
|---|---|
.badge | Pill-shaped inline-flex label. Padding 0.125rem/0.5rem, font-size 0.75rem, font-weight 500, full border-radius, blue-50 background, blue-600 text, nowrap. |
Colors
| Class | Description |
|---|---|
.badge-primary | Blue background and text color. |
.badge-danger | Red background and text color. |
.badge-success | Green background and text color. |
.badge-warning | Yellow background and text color. |
.badge-dark | Gray-900 background with white text. |
Sizes
| Class | Description |
|---|---|
.badge-sm | Small badge. Padding 0/0.25rem, font-size 0.625rem. |
.badge-lg | Large badge. Padding 0.25rem/0.75rem, font-size 0.875rem. |
Styles
| Class | Description |
|---|---|
.badge-outline | Transparent background with a 1px solid currentColor border. |
.badge-dot | Prepends a 0.375rem circle dot indicator via ::before pseudo-element. |
Tags
| Class | Description |
|---|---|
.tag | Inline-flex rectangular label. Padding 0.25rem/0.75rem, font-size 0.875rem, medium border-radius, gray-100 background, gray-800 text. |
.tag-list | Flex container with wrap and 0.5rem gap for grouping tags. |