atom :: Badge

The .badge atom is a small label for statuses, categories, and “new” markers. Pure CSS; there is no Astro component because a <span> with a class is already the whole API.

default  primary  success  danger  warning

FileDescriptionSource
atom.badge.cssAll badge stylesGithub
--badge-* block in default themeTheme tokens (see table below)Github

HTML

<span class="badge">default</span>
<span class="badge badge-success">shipped</span>

Available modifiers

ClassDescription
.badgeDefault style. Neutral colors.
.badge + .badge-primaryPrimary colors.
.badge + .badge-successPositive feedback. Greens.
.badge + .badge-dangerNegative feedback. Reds.
.badge + .badge-warningWarning. 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 the default theme:

PropertyDescription
--badge-font-sizeFont size.
--badge-border-radiusBorder radius.
--badge-colorDefault text color.
--badge-background-colorDefault background color.
--badge-primary-colorPrimary variant text color.
--badge-primary-background-colorPrimary variant background.
--badge-success-colorSuccess variant text color.
--badge-success-background-colorSuccess variant background.
--badge-danger-colorDanger variant text color.
--badge-danger-background-colorDanger variant background.
--badge-warning-colorWarning variant text color.
--badge-warning-background-colorWarning variant background.