Pill

import { Pill } from "@fanvue/ui";
import type { PillProps, PillVariant } from "@fanvue/ui";

import { ArrowUpRightIcon, FlameIcon, Pill } from "@fanvue/ui";

<div className="flex flex-col gap-3" style={{ width: 100 }}>
  <Pill variant="brand">This is a very long pill label</Pill>
  <Pill variant="base" leftIcon={<FlameIcon className="size-4" />}>
    Truncated with icon
  </Pill>
  <Pill variant="brand" rightIcon={<ArrowUpRightIcon className="size-4" />}>
    Truncated right icon
  </Pill>
</div>

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

<div className="flex flex-col gap-4">
  <div className="flex flex-wrap items-center gap-3">
    {(
      [
        ["green", "Subscriber"],
        ["grey", "Expired"],
        ["blue", "Follower"],
        ["gold", "VIP Subscriber"],
        ["pinkLight", "Text"],
        ["base", "Example"],
        ["brand", "20% discount"],
        ["brandLight", "20% discount"],
        ["beta", "Beta"],
        ["error", "Error"],
        ["red", "Inactive"],
      ] as const
    ).map(([variant, label]) => (
      <Pill key={variant} variant={variant}>
        {label}
      </Pill>
    ))}
  </div>
  <div className="flex flex-wrap items-center gap-3 rounded-xs bg-surface-primary-inverted p-4">
    <Pill variant="contrast">Contrast</Pill>
    <Pill variant="negative">Negative</Pill>
  </div>
</div>

import { FlameIcon, Pill } from "@fanvue/ui";

<Pill variant="base" leftIcon={<FlameIcon className="size-4" />}>Example</Pill>

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

<Pill variant="brand" rightIcon={<ArrowUpRightIcon className="size-4" />}>20% discount</Pill>