XDS — Design System

XDSBadge@xds/core · Badge

Preview coming soon

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.

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.

Anatomy

Element		Description
Icon		An optional leading icon that helps identify the badge type at a glance.
Label	required	The text or number shown inside the badge.

Import

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

Props

Prop	Type	Description
variant	'neutral' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'blue' \| 'cyan' \| 'green' \| 'orange' \| 'pink' \| 'purple' \| 'red' \| 'teal' \| 'yellow' (default: 'neutral')	Visual style variant. Semantic variants (neutral, info, success, warning, error) use solid backgrounds. Non-semantic color variants use tinted backgrounds with colored text for categorization and tagging.
label	ReactNode	Badge text content.
icon	ReactNode	Optional leading icon.

Examples

Common configurations, variations, and states.

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

tsx
'use client';
import {XDSBadge} from '@xds/core/Badge';
import {XDSStack} from '@xds/core/Layout';
import {XDSText} from '@xds/core/Text';
export default function BadgeCategoryTags() {
  return (
    <XDSStack direction="vertical" gap={6}>
      <XDSStack direction="vertical" gap={2}>
        <XDSText type="supporting" color="secondary">
          Teams
        </XDSText>
        <XDSStack direction="horizontal" gap={2} style={{flexWrap: 'wrap'}}>
          <XDSBadge variant="blue" label="Design" />
          <XDSBadge variant="cyan" label="DevOps" />
          <XDSBadge variant="green" label="Backend" />
          <XDSBadge variant="pink" label="Marketing" />
          <XDSBadge variant="purple" label="Engineering" />
          <XDSBadge variant="teal" label="Research" />
        </XDSStack>
      </XDSStack>
      <XDSStack direction="vertical" gap={2}>
        <XDSText type="supporting" color="secondary">
          Priority
        </XDSText>
        <XDSStack direction="horizontal" gap={2}>
          <XDSBadge variant="orange" label="Urgent" />
          <XDSBadge variant="red" label="Critical" />
          <XDSBadge variant="yellow" label="Review" />
        </XDSStack>
      </XDSStack>
    </XDSStack>
  );
}

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

tsx
'use client';
import {XDSBadge} from '@xds/core/Badge';
import {XDSStack} from '@xds/core/Layout';
import {XDSText} from '@xds/core/Text';
const COUNTS = [
  {variant: 'info' as const, label: '3', note: 'Messages'},
  {variant: 'error' as const, label: '99+', note: 'Alerts'},
  {variant: 'success' as const, label: '12', note: 'Completed'},
  {variant: 'warning' as const, label: '5', note: 'Pending'},
];
export default function BadgeCountBadges() {
  return (
    <XDSStack direction="horizontal" gap={8} hAlign="center" vAlign="center">
      {COUNTS.map(({variant, label, note}) => (
        <XDSStack key={note} direction="vertical" gap={2} hAlign="center">
          <XDSBadge variant={variant} label={label} />
          <XDSText type="supporting" color="secondary">
            {note}
          </XDSText>
        </XDSStack>
      ))}
    </XDSStack>
  );
}

Badge — StatusShow 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.

tsx
'use client';
import {XDSBadge} from '@xds/core/Badge';
import {XDSStack} from '@xds/core/Layout';
import {XDSText} from '@xds/core/Text';
export default function BadgeStatusLabels() {
  return (
    <XDSStack direction="vertical" gap={6}>
      <XDSStack direction="vertical" gap={2}>
        <XDSText type="supporting" color="secondary">
          System status
        </XDSText>
        <XDSStack direction="horizontal" gap={2} vAlign="center">
          <XDSBadge variant="success" label="Active" />
          <XDSBadge variant="warning" label="Pending" />
          <XDSBadge variant="error" label="Failed" />
        </XDSStack>
      </XDSStack>
      <XDSStack direction="vertical" gap={2}>
        <XDSText type="supporting" color="secondary">
          Workflow
        </XDSText>
        <XDSStack direction="horizontal" gap={2} vAlign="center">
          <XDSBadge variant="neutral" label="Draft" />
          <XDSBadge variant="info" label="In Review" />
        </XDSStack>
      </XDSStack>
    </XDSStack>
  );
}

Showcase source

tsx
'use client';
import {XDSBadge} from '@xds/core/Badge';
import {XDSStack} from '@xds/core/Layout';
export default function BadgeShowcase() {
  return (
    <XDSStack direction="vertical" gap={4} hAlign="center">
      <XDSStack direction="horizontal" gap={2}>
        <XDSBadge label="Neutral" variant="neutral" />
        <XDSBadge label="Info" variant="info" />
        <XDSBadge label="Success" variant="success" />
        <XDSBadge label="Warning" variant="warning" />
        <XDSBadge label="Error" variant="error" />
      </XDSStack>
      <XDSStack direction="horizontal" gap={2}>
        <XDSBadge label="Blue" variant="blue" />
        <XDSBadge label="Purple" variant="purple" />
        <XDSBadge label="Pink" variant="pink" />
        <XDSBadge label="Teal" variant="teal" />
        <XDSBadge label="Orange" variant="orange" />
      </XDSStack>
    </XDSStack>
  );
}