Badge

import { Badge } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      <Badge tone="success" dot>
        Deployed
      </Badge>
      <Badge tone="warning" dot>
        Pending
      </Badge>
      <Badge tone="danger" dot>
        Failed
      </Badge>
      <Badge>Draft</Badge>
    </div>
  );
}

import { Badge } from '@bindshq/stance-react';

export function Tones() {
  const tones = ['neutral', 'info', 'success', 'warning', 'danger', 'inverse'] as const;
  return (
    <div style={{ display: 'grid', gap: 12 }}>
      {(['soft', 'solid', 'outline'] as const).map((v) => (
        <div key={v} style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {tones.map((t) => (
            <Badge key={t} tone={t} variant={v}>
              {t}
            </Badge>
          ))}
        </div>
      ))}
    </div>
  );
}

import { Badge } from '@bindshq/stance-react';

export function Counts() {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Badge count={3} tone="inverse" variant="solid" aria-label="3 unread notifications" />
      <Badge count={48} aria-label="48 users" />
      <Badge
        count={240}
        tone="danger"
        variant="solid"
        aria-label="More than 99 failed deliveries"
      />
    </div>
  );
}

import { Badge } from '@bindshq/stance-react';

export function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <Badge size="sm" tone="info" dot>
        Beta
      </Badge>
      <Badge size="md" tone="info" dot>
        Beta
      </Badge>
    </div>
  );
}