IconButton

import { IconButton } from "@fanvue/ui";
import type { IconButtonProps, IconButtonSize, IconButtonVariant } from "@fanvue/ui";

import { HomeIcon, IconButton } from "@fanvue/ui";

<IconButton variant="primary" size="40" icon={<HomeIcon />} aria-label="Home" />

import { HomeIcon, IconButton } from "@fanvue/ui";

<fieldset disabled className="flex items-center gap-4 border-0 p-6">
  {(["primary", "secondary", "tertiary", "outline", "error"] as const).map((variant) => (
    <IconButton
      key={variant}
      variant={variant}
      size="40"
      icon={<HomeIcon />}
      aria-label={`${variant} in disabled fieldset`}
    />
  ))}
</fieldset>

import { HomeIcon, IconButton } from "@fanvue/ui";

const v2Variants = [
  "primary",
  "secondary",
  "tertiary",
  "outline",
  "error",
  "white",
  "black",
] as const;

const v2Sizes = ["24", "32", "40", "48"] as const;

<div className="flex flex-col gap-6 p-6">
  {v2Variants.map((variant) => (
    <div key={variant} className="flex items-center gap-4">
      <span className="w-20 font-mono text-content-secondary text-xs">{variant}</span>
      {v2Sizes.map((size) => (
        <IconButton
          key={size}
          variant={variant}
          size={size}
          icon={<HomeIcon />}
          aria-label={`${variant} ${size}`}
        />
      ))}
      <IconButton
        variant={variant}
        size="40"
        icon={<HomeIcon />}
        aria-label={`${variant} disabled`}
        disabled
      />
    </div>
  ))}
</div>

import { HomeIcon, IconButton } from "@fanvue/ui";

<IconButton variant="contrast" size="24" icon={<HomeIcon />} />

import { HomeIcon, IconButton } from "@fanvue/ui";

<div className="flex items-center gap-4 bg-neutral-900 p-6">
  {(["primary", "secondary", "tertiary", "outline"] as const).map((variant) => (
    <IconButton
      key={variant}
      variant={variant}
      size="40"
      negative
      icon={<HomeIcon />}
      aria-label={`${variant} negative`}
    />
  ))}
</div>