- ☀️Light
- 🌙Dark
- 💻System
💠 Examples
Badge primary
Badge outline-primary
Badge primary rounded-pill
Badge small
Badge medium
Badge large
💻 HTML Code
Badge primary
Badge outline-primary
Badge primary rounded-pill
Badge small
Badge medium
Badge large
📏 Sizes
These classes apply only to the badge.
Each one already includes both the style and the size, so just pick the one you need.
.badge
.badge-sm
.badge-md
.badge-lg
🎨 Colors
Choose the badge style by applying the appropriate class to your element.
.badge-{color}
.outline-{color}
🧵 Type
Choose the badge type by adding the corresponding class to your element.
.rounded-pill
📌 Badge group
Use .badge-group to display several badges on the
same line
with consistent spacing.
The container automatically:
⚙️ Variables CSS
| Variable | Description |
|---|---|
--badge-border-color |
Border color of the badge. |
--badge-border-radius |
Corner radius of the badge. |
--badge-border-style |
Border style of the badge. |
--badge-border-width |
Thickness of the badge border. |
--badge-group-gap |
Gap between badges inside a badge group. |
--badge-padding |
Default padding inside the badge. |
--badge-padding-lg |
Padding for large-sized badges. |
--badge-padding-md |
Padding for medium-sized badges. |
--badge-padding-sm |
Padding for small-sized badges. |