Elements

Badges

Compact labels for status, counts, and tags.

Setup

Badge styles are included in Manifest CSS or the standalone typography stylesheet. Both reference theme variables.




<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.css" />

Default

Apply the badge class to any text element.



<span class="badge">Badge</span>

Utilities

Badges accept Manifest utility classes, which can be stacked in any combination.

Colors



<!-- Brand variant -->
<span class="badge brand">Brand</span>

<!-- Accent variant -->
<span class="badge accent">Accent</span>

<!-- Positive variant -->
<span class="badge positive">Positive</span>

<!-- Negative variant -->
<span class="badge negative">Negative</span>

Size



<!-- Small variant -->
<span class="badge sm">Small</span>

<!-- Large variant -->
<span class="badge lg">Large</span>

Appearance



<!-- No background until hover -->
<span class="badge ghost">Ghost</span>

<!-- Border included -->
<span class="badge outlined">Outlined</span>

<!-- No background at all -->
<span class="badge transparent">Transparent</span>

<!-- No padding for minimal target area, best paired with transparency -->
<span class="badge hug transparent">Hug</span>

Icons

Solo Icon

Badges containing a single icon are automatically squared.



<span class="badge" x-icon="lucide:heart"></span>

Icon & Text

Any number of icons and text can be nested in any order. Place icons in <span> tags, and any sibling elements will auto-space.



<span class="badge"><span x-icon="lucide:heart"></span> 79</span>
<span class="badge"><span x-icon="lucide:thumbs-down"></span><span>21</span></span>

Styles

Theme

Default badges use the following theme variables:

Variable Purpose
--color-content-stark High contrast text color
--spacing Padding and margin factor in various elements
--radius Border radius for badge corners

Customization

Modify base styles with custom CSS for the badge class.



.badge {
    color: blue;
    background: lightblue;
}