Badge
Introduction
A badge is a small, color-coded UI element used to display status or count information in a compact, glanceable format.
Badges help users quickly understand context — whether something is successful, pending, or how many items need attention.
They are typically used in:
- Tables or lists to indicate status
- Icons or buttons to show counts (e.g., unread messages, alerts)
- Filters or labels to categorize data
Types of Badges
| Type | Purpose | Example |
|---|---|---|
| Status | Communicates a state such as success, warning, danger, etc. | Active, Failed, In Progress |
| Count | Displays a numeric or limited alphanumeric value, often overlaid on an icon or element. | 3, 12, 99+ |
Variants
Solid
Use the solid variant for strong emphasis or high-visibility contexts. It’s ideal for critical statuses or primary counts that need attention. The filled background draws the eye, making it effective for conveying clear meaning — such as “Error,” “Completed,” or a red count bubble indicating new notifications.
Implimentation examples
Using in real examples
Outline
Use the outline variant when visual subtlety is preferred — for example, in dense UIs or when badges are used in secondary contexts like filters or table rows. The outlined appearance keeps the interface clean while still providing enough color and structure to convey meaning or context.
Implimentation examples
Using in real examples
Usage Guidelines
| Variant | Color | Usage | Example |
|---|---|---|---|
| Solid | 🟩 Success | Positive confirmation or completion. | Completed, Active |
| Solid | 🟦 Info | Neutral or ongoing process information. | In Progress, New |
| Solid | 🟥 Danger | Critical or error state that requires attention. | Failed, Error |
| Solid | 🟧 Warning | Caution or potential issue. | Expiring, At Risk |
| Solid | ⚪ Neutral | Generic or inactive state. | Draft, Archived |
| Outline | 🟩 Success | Positive state shown subtly. | Verified, Healthy |
| Outline | 🟦 Info | Informational status with low emphasis. | Pending Review, Processing |
| Outline | 🟥 Danger | Problematic state with softer visual impact. | Declined, Attention |
| Outline | 🟧 Warning | Low-priority warning or gentle alert. | Pending, Expiring Soon |
| Outline | ⚪ Neutral | Default or inactive state. | None, N/A |
| Solid / Outline | 🔢 Any color | Numeric or count-based indicators. | 5, 12, 99+ |
Count Badge Usage
When used for counts, badges help indicate the quantity of notifications, items, or alerts.
| Context | Variant | Example | Notes |
|---|---|---|---|
| Notification icon | Solid Danger | 🔴 3 | Red solid badges communicate urgency (e.g., new alerts). |
| Tab with updates | Solid Info | 🟦 5 | Blue info badge signals new, non-critical content. |
| Filter with applied items | Outline Neutral | ⚪ 2 | Subtle and non-intrusive. |
| Cart item count | Solid Success | 🟩 4 | Indicates added items or positive interaction. |
Additional Tips
- Keep badge content short and readable — one word or a small number.
- Use sentence case for text badges.
- Maintain consistent color semantics across components.
- Provide accessible labels for screen readers, especially for numeric-only badges.
- Avoid using badges for decorative color alone — they should always convey meaning.
Examples
Specifications
Properties
| Property | Attribute | Required | Description |
|---|---|---|---|
| color | color | Controls the background color. Prefer the 'variant' prop instead. | |
| fill | fill | Controls the fill style | |
| variant | variant | Controls the background color. |
Slots
| Name | Description |
|---|---|
| default | the text |
| CSS variable name | Description |
|---|---|
| --badge-bg | background color for solid variant |
| --badge-text | text color for outline variant |
| --f-badge-colors-danger-background | danger badge background color |
| --f-badge-colors-danger-border | danger badge border color |
| --f-badge-colors-danger-text | danger badge text color |
| --f-badge-colors-info-background | primary badge background color |
| --f-badge-colors-info-border | primary badge border color |
| --f-badge-colors-info-text | primary badge text color |
| --f-badge-colors-neutral-background | neutral badge background color |
| --f-badge-colors-neutral-border | neutral badge border color |
| --f-badge-colors-neutral-text | neutral badge text color |
| --f-badge-colors-success-background | success badge background color |
| --f-badge-colors-success-border | success badge border color |
| --f-badge-colors-success-text | success badge text color |
| --f-badge-colors-upsell-background | accent badge background color |
| --f-badge-colors-upsell-border | accent badge border color |
| --f-badge-colors-upsell-text | accent badge text color |
| --f-badge-colors-warning-background | warning badge background color |
| --f-badge-colors-warning-border | warning badge border color |
| --f-badge-colors-warning-text | warning badge text color |
| --f-badge-sizes-corner | border radius |
| --f-badge-sizes-height | height |
| --f-fonts-size-xs | font size |
| --f-sizes-sm-padding | horizontal padding |
