v0.5.14

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:

5 lines
import { Badge } from '@wandercom/design-system-web/ui/badge';

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

Examples

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

export function BadgeExamples() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="ghost">Ghost</Badge>
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="error">Error</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="success">Success</Badge>
    </div>
  );
}

With icons

Include optional icons to enhance visual communication:

18 lines
import { Badge } from '@wandercom/design-system-web/ui/badge';

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?:

'ghost' | 'neutral' | 'error' | 'info' | 'warning' | 'success'
Color variant of the badge. Defaults to neutral. "ghost" has no background color. "destructive" and "alert" are deprecated aliases for "error" and "warning".

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