Badge

Small pill-shaped labels for status, categories, and tags

Installation

pnpm add @wandercom/design-system-web

Usage

Display status indicators, category labels, or tags using the Badge component:

import { Badge } from '@wandercom/design-system-web';

export function Example() {
  return <Badge variant="neutral">Default</Badge>;
}

Examples

Loading example...
import { Badge } from '@wandercom/design-system-web';

export function BadgeExamples() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="alert">Warning</Badge>
      <Badge variant="success">Success</Badge>
    </div>
  );
}

With icons

Include optional icons to enhance visual communication:

import { Badge } from '@wandercom/design-system-web';

function CheckIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="currentColor">
      <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
    </svg>
  );
}

export function Example() {
  return (
    <Badge variant="success">
      <CheckIcon />
      Verified
    </Badge>
  );
}

Props

variant?:

'neutral' | 'destructive' | 'info' | 'warning' | 'success'
Color variant of the badge. Defaults to neutral.

className?:

string
Additional CSS classes to apply to the badge.

children?:

React.ReactNode
Content to display in the badge. Can include text and/or icon elements.
Badge