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

FAQ

Does the Badge component require the card or other components to work?

No, badge is a standalone component. It's shown paired with card in the examples above, but it works fine on its own, on any element.

How do I change the badge's colors?

Use the --badge-bg and --badge-color CSS variables, as shown in the "Orange" example above (style="--badge-bg: orange; --badge-color: #111").

How do I position a badge on the corner of another element, like a cart icon?

Give the parent a relative class, then add absolute to the badge along with --inset-t/--inset-e (or --inset-s/--inset-b) to position it, as shown in the "Cart Item" example.

Is the Badge component accessible to screen readers on its own?

The badge itself is just a visual label. For meaningful content like a cart count, add an aria-label on the parent element (as in the Cart Item example) so screen reader users get the full context, not just the number.