XDS — Design System

Badge@xds/core v0.0.13 · XDSBadge

Usage

Badge shows a short label like a status, count, or category. Use it in table rows, list items, navigation, and anywhere you need to call out a state or group at a glance.

ts
import {XDSBadge} from '@xds/core/Badge'

Best practices

Guidance	Practices
Do	Use success, warning, and error variants for system status like "Active", "Pending", or "Failed". Use color variants like blue, purple, or teal for categories and tags.
Do	Keep labels to one or two words. If you need more detail, put it in surrounding text instead of the badge.
Do	Add an icon when it helps identify the badge type quickly, but always include a text label alongside it.
Don't	Make badges clickable — they are read-only indicators. Use a button or link if the user needs to take action.

Examples

Common configurations, variations, and states.

Badge — Colors

Tag items with color-coded categories like teams, priorities, or topics. Use the 9 non-semantic color variants when you need to distinguish groups visually.

Badge — Counts

Show a number inside a badge for notification counts, unread messages, or task totals. Use next to icons, nav items, or list labels.

Badge — Status

Show the state of an item like Active, Pending, or Failed. Use in table rows, list items, or detail pages where users need to see status at a glance.