XDS — Design System

Badge@xds/core · XDSBadge v0.0.13

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 — 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>
  );
}

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.

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.

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> ); }

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> ); }

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> ); }

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> ); }