Badge

A cross-platform React badge component for displaying counts, status indicators, and small labels. Supports multiple sizes and color tones.

Installation

npm install @xsolla/xui-badge
# or
yarn add @xsolla/xui-badge

Demo

Basic Badge

import * as React from 'react';
import { Badge } from '@xsolla/xui-badge';

export default function BasicBadge() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Badge>5</Badge>
      <Badge>99+</Badge>
      <Badge>New</Badge>
    </div>
  );
}

Badge Tones

import * as React from 'react';
import { Badge } from '@xsolla/xui-badge';

export default function BadgeTones() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Badge tone="primary">Primary</Badge>
      <Badge tone="secondary">Secondary</Badge>
      <Badge tone="brand">Brand</Badge>
      <Badge tone="brandExtra">Extra</Badge>
      <Badge tone="success">Success</Badge>
      <Badge tone="warning">Warning</Badge>
      <Badge tone="alert">Alert</Badge>
      <Badge tone="neutral">Neutral</Badge>
    </div>
  );
}

Badge Sizes

import * as React from 'react';
import { Badge } from '@xsolla/xui-badge';

export default function BadgeSizes() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Badge size="xs" tone="alert" /> {/* Dot only */}
      <Badge size="sm" tone="alert" />  {/* Dot only */}
      <Badge size="md" tone="alert">5</Badge>
      <Badge size="lg" tone="alert">5</Badge>
      <Badge size="xl" tone="alert">5</Badge>
    </div>
  );
}

Badge with Icon

import * as React from 'react';
import { Badge } from '@xsolla/xui-badge';
import { Check, AlertCircle } from '@xsolla/xui-icons';
import { Star } from '@xsolla/xui-icons-base';

export default function BadgeWithIcon() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Badge icon={<Star size={12} />} tone="warning">Featured</Badge>
      <Badge icon={<Check size={12} />} tone="success">Verified</Badge>
      <Badge icon={<AlertCircle size={12} />} tone="alert">Error</Badge>
    </div>
  );
}

Dot Badge (Status Indicator)

import * as React from 'react';
import { Badge } from '@xsolla/xui-badge';

export default function DotBadge() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <span>Online</span>
      <Badge size="xs" tone="success" />

      <span>Away</span>
      <Badge size="xs" tone="warning" />

      <span>Busy</span>
      <Badge size="xs" tone="alert" />

      <span>Offline</span>
      <Badge size="xs" tone="neutral" />
    </div>
  );
}

Anatomy

Import the component and use it directly:

import { Badge } from '@xsolla/xui-badge';

<Badge
  size="md"              // Size variant (xs/s are dots only)
  tone="alert"          // Color tone
  icon={<Icon />}       // Optional icon
  showStroke={false}    // Show border
>
  Content
</Badge>

Examples

Notification Count

import * as React from 'react';
import { Badge } from '@xsolla/xui-badge';
import { Bell } from '@xsolla/xui-icons';

export default function NotificationBadge() {
  const count = 12;

  return (
    <div style={{ position: 'relative', display: 'inline-block' }}>
      <Bell size={24} />
      <div style={{ position: 'absolute', top: -8, right: -8 }}>
        <Badge tone="alert" size="md">
          {count > 99 ? '99+' : count}
        </Badge>
      </div>
    </div>
  );
}

Badge with Stroke

import * as React from 'react';
import { Badge } from '@xsolla/xui-badge';

export default function BadgeWithStroke() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Badge tone="brand" showStroke>Pro</Badge>
      <Badge tone="success" showStroke>Active</Badge>
    </div>
  );
}

Status Labels

import * as React from 'react';
import { Badge } from '@xsolla/xui-badge';

export default function StatusLabels() {
  const statuses = [
    { label: 'Published', tone: 'success' as const },
    { label: 'Draft', tone: 'neutral' as const },
    { label: 'Pending', tone: 'warning' as const },
    { label: 'Rejected', tone: 'alert' as const },
  ];

  return (
    <div style={{ display: 'flex', gap: 12 }}>
      {statuses.map((status) => (
        <Badge key={status.label} tone={status.tone} size="md">
          {status.label}
        </Badge>
      ))}
    </div>
  );
}

API Reference

Badge

A badge component for counts and status indicators.

Badge Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Badge content (ignored for xs/s sizes). | | icon | ReactNode | - | Icon to display. | | size | "xl" \| "lg" \| "md" \| "sm" \| "xs" | "md" | Size of the badge. | | tone | "primary" \| "secondary" \| "brand" \| "brandExtra" \| "success" \| "warning" \| "alert" \| "neutral" | "alert" | Color tone. | | showStroke | boolean | false | Show border around badge. | | aria-label | string | - | Accessible label. | | aria-hidden | boolean | - | Hide from screen readers. |

Size Behavior:

| Size | Behavior | | :--- | :------- | | xs | Dot only (8px), no content | | sm | Dot only (12px), no content | | md | Supports content (20px height) | | lg | Supports content (24px height) | | xl | Supports content (28px height) |

Tone Color Mapping:

| Tone | Background | Text | | :--- | :--------- | :--- | | primary | Background primary | Content primary | | secondary | Background secondary | Content primary | | brand | Brand primary | On brand | | brandExtra | BrandExtra primary | On brandExtra | | success | Success primary | On success | | warning | Warning primary | On warning | | alert | Alert primary | On alert | | neutral | Neutral primary | On neutral |

Theming

Badge uses the design system theme for colors:

// Colors accessed via theme (example for "alert" tone)
theme.colors.background.alert.primary  // Background
theme.colors.content.onAlert           // Text color

Accessibility

• Uses role="status" for proper semantics
• Dot badges without labels use aria-hidden by default
• Supports custom aria-label for screen readers
• Text content is automatically announced