Badges

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" />

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

Default

Badges use the <mark> tag for styling without a class required.

<mark>Badge</mark>

Utilities

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

Colors

<!-- Brand variant -->
<mark class="brand">Primary</mark>

<!-- Accent variant -->
<mark class="accent">Accent</mark>

<!-- Positive variant -->
<mark class="positive">Positive</mark>

<!-- Negative variant -->
<mark class="negative">Negative</mark>

Size

<!-- Small variant -->
<mark class="sm">Small</mark>

<!-- Large variant -->
<mark class="lg">Large</mark>

Appearance

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

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

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

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

Icons

Solo Icon

Badges containing a single icon are automatically squared.

<mark x-icon="lucide:heart"></mark>

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.

<mark><span x-icon="lucide:heart"></span> 79</mark>
<mark><span x-icon="lucide:thumb-down"></span><span>21</span></mark>

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 `<pre>` corners

Customization

Modify base badge styles with custom CSS for the <mark> selector.

mark {
    color: blue;
    background: lightblue;
}