Badge

import { Badge } from '@raystack/apsara';

function StatusIndicator() {
  return <Badge>New</Badge>;
}

import { Badge } from '@raystack/apsara';

function BadgeVariants() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Badge variant="accent">Accent</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="danger">Danger</Badge>
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="gradient">Gradient</Badge>
    </div>
  );
}

import { Badge } from '@raystack/apsara';

function BadgeSizes() {
  return (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <Badge size="micro">Micro</Badge>
      <Badge size="small">Small</Badge>
      <Badge size="regular">Regular</Badge>
    </div>
  );
}

import { Badge } from '@raystack/apsara';
import { CheckIcon } from '@heroicons/react/24/outline';

function IconBadge() {
  return (
    <Badge 
      variant="success" 
      icon={<CheckIcon style={{ width: 14, height: 14 }} />}
    >
      Verified
    </Badge>
  );
}

import { Badge } from '@raystack/apsara';

function NotificationBadge() {
  return (
    <div style={{ position: 'relative', display: 'inline-block' }}>
      <button>Messages</button>
      <Badge 
        size="micro" 
        variant="danger"
        style={{ position: 'absolute', top: -8, right: -8 }}
      >
        5
      </Badge>
    </div>
  );
}

import { Badge } from '@raystack/apsara';

function StatusBadges() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Badge variant="success">Active</Badge>
      <Badge variant="warning">Pending</Badge>
      <Badge variant="danger">Failed</Badge>
      <Badge variant="neutral">Inactive</Badge>
    </div>
  );
}

import { Badge } from '@raystack/apsara';

function AccessibleBadge() {
  return (
    <Badge 
      variant="danger" 
      screenReaderText="5 unread messages"
    >
      5
    </Badge>
  );
}

import { Badge } from '@raystack/apsara';

function ComplexBadge() {
  return (
    <Badge variant="accent">
      <span>Count:</span> {42}
    </Badge>
  );
}