component :: Badge
The badge is a small label for statuses, categories, and “new” markers. It is a CSS-only component: there is no Astro file because a <span> with the .badge class is already the whole API.
default primary success danger warning
Playground
new
Variation
Content
Copied!
<span class="badge">new</span>HTML
<span class="badge">default</span><span class="badge badge-success">shipped</span>Available modifiers
| Class | Description |
|---|---|
.badge |
Default style. Neutral colors. |
.badge + .badge-primary |
Primary colors. |
.badge + .badge-success |
Positive feedback. Greens. |
.badge + .badge-danger |
Negative feedback. Reds. |
.badge + .badge-warning |
Warning. Oranges. |
One-off colors work like every other variant in mCSS: override the local custom property.
<span class="badge" style="--badge-background-color: rebeccapurple">custom</span>Custom properties
The following custom properties are available in settings.ui.css:
| Property | Description |
|---|---|
--badge-font-size |
Font size. |
--badge-border-radius |
Border radius. |
--badge-color |
Default text color. |
--badge-background-color |
Default background color. |
--badge-primary-color |
Primary variant text color. |
--badge-primary-background-color |
Primary variant background. |
--badge-success-color |
Success variant text color. |
--badge-success-background-color |
Success variant background. |
--badge-danger-color |
Danger variant text color. |
--badge-danger-background-color |
Danger variant background. |
--badge-warning-color |
Warning variant text color. |
--badge-warning-background-color |
Warning variant background. |