Fylgja Badge

GitHub npm Changelog
Ask AI
View as Markdown Ask Claude

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

npm install @fylgja/badge

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

Sunny Cat Wallpaper10% more cute

Sunny Cat Wallpaper

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

€18.99

Orange Fox WallpaperOrange

Orange Fox Wallpaper

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

€6.00