Badge

import { Badge } from '@/components/ui/badge';

export default function BadgeDemo() {
  return <Badge>Badge</Badge>;
}

import * as stylex from '@stylexjs/stylex';

import { space } from '@/lib/constants.stylex';

import { Badge } from '@/components/ui/badge';

export default function BadgeVariants() {
  return (
    <div {...stylex.props(styles.row)}>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
    </div>
  );
}

const styles = stylex.create({
  row: {
    alignItems: 'center',
    display: 'flex',
    flexWrap: 'wrap',
    gap: space.s2,
  },
});

import * as stylex from '@stylexjs/stylex';
import { Check } from 'lucide-react';

import { Badge } from '@/components/ui/badge';
import { icon } from '@/lib/stylex-utils';

export default function BadgeIcon() {
  return (
    <Badge variant="secondary">
      <Check {...stylex.props(icon.xs)} />
      Verified
    </Badge>
  );
}

import { Badge } from '@/components/ui/badge';
import { Spinner } from '@/components/ui/spinner';

export default function BadgeSpinner() {
  return (
    <Badge variant="secondary">
      <Spinner width="12" height="12" />
      Syncing
    </Badge>
  );
}

import { Badge } from '@/components/ui/badge';

export default function BadgeLink() {
  return (
    <Badge variant="secondary" render={<a href="#" />}>
      New release
    </Badge>
  );
}