Badge

import { Badge } from "@fanvue/ui";
import type { BadgeProps, BadgeVariant } from "@fanvue/ui";

import { Badge } from "@fanvue/ui";

<Badge>Badge</Badge>

import { ArrowUpRightIcon, Badge, CheckCircleIcon } from "@fanvue/ui";

<div className="flex flex-col gap-3" style={{ width: 80 }}>
  <Badge variant="success">Very long badge text here</Badge>
  <Badge variant="brand" leftDot={false} leftIcon={<CheckCircleIcon className="size-2.5" />}>
    Truncated with icon
  </Badge>
  <Badge variant="default" rightIcon={<ArrowUpRightIcon className="size-2.5" />}>
    Truncated right icon
  </Badge>
</div>

import { AIIcon, Badge } from "@fanvue/ui";
import type { BadgeVariant } from "@fanvue/ui";

const VARIANT_GROUPS: { title: string; onDark?: boolean; variants: BadgeVariant[] }[] = [
  {
    title: "Status",
    variants: ["default", "dark", "success", "warning", "error", "info", "special"],
  },
  {
    title: "Colour",
    variants: ["successColour", "warningColour", "errorColour", "infoColour"],
  },
  {
    title: "Brand",
    variants: ["brand", "pink", "brandLight", "pinkLight", "online"],
  },
  {
    title: "On dark surfaces",
    onDark: true,
    variants: ["negative", "alwaysWhite", "aiGenerated"],
  },
];

const VariantBadge = ({ variant, showPip = true }: { variant: BadgeVariant; showPip?: boolean }) =>
  variant === "aiGenerated" ? (
    <Badge variant="aiGenerated" leftDot={false} leftIcon={<AIIcon className="size-2.5" />}>
      AI Generated
    </Badge>
  ) : (
    <Badge variant={variant} leftDot={showPip}>
      {variant}
    </Badge>
  );

const NO_PIP_VARIANTS: BadgeVariant[] = [
  "default",
  "successColour",
  "warningColour",
  "errorColour",
  "infoColour",
];

<div className="flex flex-col gap-8">
  {VARIANT_GROUPS.map((group) => (
    <div key={group.title} className="flex flex-col gap-3">
      <h3 className="typography-body-small-14px-semibold text-content-primary">
        {group.title}
      </h3>
      <div
        className={
          group.onDark
            ? "flex flex-wrap items-center gap-4 rounded-xs bg-surface-primary-inverted p-4"
            : "flex flex-wrap items-center gap-4"
        }
      >
        {group.variants.map((variant) => (
          <VariantBadge key={variant} variant={variant} />
        ))}
      </div>
    </div>
  ))}
  <div className="flex flex-col gap-3">
    <h3 className="typography-body-small-14px-semibold text-content-primary">Without pip</h3>
    <div className="flex flex-wrap items-center gap-4">
      {NO_PIP_VARIANTS.map((variant) => (
        <VariantBadge key={variant} variant={variant} showPip={false} />
      ))}
    </div>
  </div>
</div>

import { Badge } from "@fanvue/ui";

<Badge leftDot={false}>No Dot</Badge>

import { Badge, CheckCircleIcon } from "@fanvue/ui";

<Badge leftIcon={<CheckCircleIcon className="size-2.5" />} leftDot={false}>Verified</Badge>