Indicators
Badge
Badges of different kind to be used for several purposes.
Overview
The Badge component displays a small label or count for status, notifications, or categories. It supports multiple variants and fits headers, navigation, and cards.
Key Business & UX Benefits
- Surfaces counts (e.g. cart) or status (e.g. new) in a compact way.
- Themed variants keep badges consistent and on-brand.
- Small footprint fits nav, headers, and list items.
- Accessible with proper semantics for counts and status.
Pro-Tip from Larry: Use badges for cart count and notification counts so users see them at a glance.
Usage
Badge
Feature List
- Multiple variants for status, count, and accent
- Theme-aligned colors and sizing
- Compact display for nav and cards
- Accessible label and count semantics
API Reference
| Prop | Default | Type |
|---|---|---|
text | Badge | string |
variant | default | "default" | "primary" | "positive" | "accent" |
isRounded | false | boolean |
leftIcon | string | |
rightIcon | string |
| Slot | Type |
|---|---|
default | {} |