Badge
Loading playground
Overview
Badge is a compact label for status, counts, and category tags. It works as a cart count, a "new" marker, a discount indicator (via leftIcon plus slot text), or any other inline annotation that needs to read at a glance. Toggle rounded for pill versus rectangular shape depending on the surrounding chrome.
Variants
variant picks the colour role:
variant | Use for |
|---|---|
default | Neutral annotation, the baseline |
primary | The brand accent |
accent | A secondary highlight, such as "New" |
positive | Success and in-stock states |
pale | A muted badge for low-emphasis metadata |
plain | Text and icon only, no chip background |
glass-black | Badges sitting over arbitrary media |
Over media
@laioutr-core/ui-kitglass-black is the variant for a badge placed over a photo or video, where no solid colour can be guaranteed legible against the pixels behind it. It draws a translucent dark chip with a backdrop blur, so the text keeps its contrast whatever the media does underneath.
<LBadge rounded variant="glass-black">Limited</LBadge>
It is what MediaFeed renders its item badges as, for exactly that reason.
Key Business & UX Benefits
- One badge primitive handles cart counts, status pills, and category tags, so every small label across the app shares the same look and tone.
- The pill versus rectangular toggle adapts to surrounding chrome (header, card, nav), keeping visual hierarchy clean without bespoke variants per location.
- A clear cart count badge is a proven conversion lever; the built-in styling ensures it always reads at a glance, even at small sizes on mobile.
- Icon-plus-text composition lets teams build discount, status, or attention indicators without reaching for a second component.
Usage
<LBadge rounded variant="accent">New</LBadge>
Feature List
- Seven `variant` values ('default', 'primary', 'accent', 'positive', 'pale', 'plain', 'glass-black') drive separate text and icon color tokens per role
- `glass-black` stays legible over arbitrary media with a translucent chip and a backdrop blur
- `rounded` boolean toggles between pill and rectangular shape, so the same primitive fits header chrome and card chrome
- `iconLeft` and `iconRight` props place small icons either side of the slot text, useful for status badges and discount tags
- Built-in xs subline typography keeps cart counts and category tags legible at small sizes on mobile
- Per-variant token bindings (`--badge-{variant}-text`, `--badge-{variant}-icon`) give themes precise color hooks
API Reference
| Prop | Default | Type |
|---|---|---|
text | Badge | string |
variant | default | "default" | "primary" | "glass-black" | "positive" | "accent" | "pale" | "plain" |
rounded | false | boolean |
iconLeft | string | |
iconRight | string |
| Slot | Type |
|---|---|
default | {} |
Changelog
New glass-black variant for badges sitting over arbitrary media — a translucent dark chip with a backdrop blur, so the text keeps its contrast whatever the media does underneath. See Over media.