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
npm install @fylgja/badgepnpm add @fylgja/badge<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
Ready made examples built on this component live in the Fylgja UI gallery:
- Badge, the pill on its own, including the notification count pinned to a button
- Product Label, a badge flagging a sale over a product image
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.