Button

import { Button } from "@fanvue/ui";
import type { ButtonProps, ButtonSize, ButtonVariant } from "@fanvue/ui";

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

<Button variant="primary" size="48">Label</Button>

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

<Button variant="primary" size="48" loading>Label</Button>

import { Button, PlusIcon } from "@fanvue/ui";

<Button variant="primary" size="48" leftIcon={<PlusIcon />}>Add Item</Button>

import { Button } from "@fanvue/ui";
import type { ButtonVariant } from "@fanvue/ui";

const NEGATIVE_AWARE_VARIANTS_LIST: ButtonVariant[] = [
  "primary",
  "secondary",
  "tertiary",
  "outline",
];

const STANDALONE_VARIANTS_LIST: ButtonVariant[] = [
  "brand",
  "destructive",
  "ai",
  "white",
  "alwaysBlack",
  "link",
  "tertiaryDestructive",
  "text",
];

const renderMatrixRow = (variant: ButtonVariant, negative: boolean) => (
  <div key={`${variant}-${negative}`} className="flex items-center gap-3">
    <span className="w-32 text-xs">{`${variant}${negative ? " (negative)" : ""}`}</span>
    <Button variant={variant} size="48" negative={negative}>
      Label
    </Button>
    <Button variant={variant} size="48" negative={negative} disabled>
      Label
    </Button>
    <Button variant={variant} size="48" negative={negative} loading>
      Label
    </Button>
    <Button variant={variant} size="40" negative={negative}>
      Label
    </Button>
    <Button variant={variant} size="32" negative={negative}>
      Label
    </Button>
    <Button variant={variant} size="24" negative={negative}>
      Label
    </Button>
  </div>
);

<div className="flex flex-col gap-6">
  <div>
    <h3 className="typography-header-heading-xs mb-3">
      Default surface — default, disabled, loading, then sizes 40 / 32 / 24
    </h3>
    <div className="flex flex-col gap-2">
      {NEGATIVE_AWARE_VARIANTS_LIST.map((v) => renderMatrixRow(v, false))}
      {STANDALONE_VARIANTS_LIST.map((v) => renderMatrixRow(v, false))}
    </div>
  </div>
  <div className="rounded-md bg-surface-primary-inverted p-4">
    <h3 className="typography-header-heading-xs mb-3 text-content-primary-inverted">
      Negative on dark surface
    </h3>
    <div className="flex flex-col gap-2">
      {NEGATIVE_AWARE_VARIANTS_LIST.map((v) => renderMatrixRow(v, true))}
    </div>
  </div>
</div>

import { Button, CrownIcon } from "@fanvue/ui";

<Button variant="brand" size="48" rightIcon={<CrownIcon />} price="$X.XX/ month">Join now</Button>