Fylgja Badge

The Fylgja Badge component allows you to display compact labels or status indicators alongside other UI elements.

This component is ideal for showing counts, status chips, or small tags — for example: unread counts, state indicators (active/inactive), or categorical markers.

Installation

You can install Fylgja Badge via npm or other Node-based package managers like pnpm or bun:

npm install @fylgja/badge

Alternatively, you can use it directly via a CDN:

<link href="https://cdn.jsdelivr.net/npm/@fylgja/badge/index.min.css" rel="stylesheet">

Usage

Once installed, you can import the full package with:

@import "@fylgja/badge";

Examples

These examples demonstrate how you can use the Badge component with various layout and content options.

Cart Item

<button class="relative" aria-label="3 Products in your Cart" style="--px: .375rem">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-cart"><circle cx="8" cy="21" r="1"></circle><circle cx="19" cy="21" r="1"></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path></svg>
	<span class="badge absolute" style="--inset-t: -1ch; --inset-e: -1ch">3</span>
</button>

Product Item with Sale Label

10% more cute

Sunny Cat Wallpaper

Dicta ea a, commodi reiciendis aut doloremque earum fugit ducimus officiis.

€18.99

Orange

Orange Fox Wallpaper

Dicta ea a, commodi reiciendis aut doloremque earum fugit ducimus officiis.

€6.00