AiButton

import { AiButton } from "@fanvue/ui";
import type { AiButtonProps, AiButtonSize } from "@fanvue/ui";

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

<AiButton
  label="Analyse"
  activeLabel="Analysing"
  active={false}
  disabled={false}
  size="32"
/>

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

<AiButton
  label="Analyse"
  activeLabel="Analysing"
  active
  disabled={false}
  size="32"
/>

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

<div className="flex items-center gap-4">
  {(["24", "32", "40"] as const).map((size) => (
    <AiButton
      label="Analyse"
      activeLabel="Analysing"
      active={false}
      disabled={false}
      key={size}
      size={size}
    />
  ))}
</div>

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

<AiButton
  label="Analyse this chart"
  activeLabel="Analysing this chart"
  active={false}
  disabled={false}
  size="32"
/>

import { useState } from "react";
import { AiButton } from "@fanvue/ui";

function Example() {
  const [active, setActive] = useState(false);
  return (
    <div className="flex items-center gap-4">
      <AiButton
        label="Analyse"
        activeLabel="Analysing"
        disabled={false}
        size="32"
        active={active}
        onClick={() => setActive((value) => !value)}
      />
      <span className="typography-description-12px-regular text-content-secondary">
        click to toggle
      </span>
    </div>
  );
}