> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# AiButton

> A pill button for AI actions.

```tsx theme={null}
import { AiButton } from "@fanvue/ui";
import type { AiButtonProps, AiButtonSize } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-aibutton--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AiButton — Default" />
</Frame>

```tsx theme={null}
import { AiButton } from "@fanvue/ui";

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

## Active

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-aibutton--active&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AiButton — Active" />
</Frame>

```tsx theme={null}
import { AiButton } from "@fanvue/ui";

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

## Sizes

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-aibutton--sizes&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AiButton — Sizes" />
</Frame>

```tsx theme={null}
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>
```

## Long Label

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-aibutton--long-label&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AiButton — Long Label" />
</Frame>

```tsx theme={null}
import { AiButton } from "@fanvue/ui";

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

## Toggling

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-aibutton--toggling&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="AiButton — Toggling" />
</Frame>

```tsx theme={null}
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>
  );
}
```

## Props

## AiButton

A pill button for AI actions. The label shimmers letter by letter and the glyph flickers at rest; on hover both settle and the green treatment eases in together — outline, rim and a sheen pooling along the bottom edge under the cursor, which follows it across the button. On focus each letter blooms once before the shimmer resumes. The lit rim and sheen come from the `fv-ai-button` utility in `base.css`.

It shares `Button`'s geometry — `rounded-full`, the same heights and label typography — so it sits alongside one without looking foreign. Both labels are rendered stacked in a single grid cell, so swapping to `active` crossfades without the button changing width.

Honours `prefers-reduced-motion`: the shimmer and flicker are dropped and the label renders in its settled state.

<ParamField path="label" type="string" required>
  Resting label. Also the accessible name unless `aria-label` is given.
</ParamField>

<ParamField path="active" type="boolean" default="false">
  Swap to `activeLabel` and keep the shimmer running.
</ParamField>

<ParamField path="activeLabel" type="string">
  Label shown while `active`. Falls back to `label`.
</ParamField>

<ParamField path="icon" type="ReactNode">
  Replace the leading AI glyph.
</ParamField>

<ParamField path="size" type="&#x22;24&#x22; | &#x22;32&#x22; | &#x22;40&#x22;" default="32" />

<ParamField path="type" type="&#x22;button&#x22; | &#x22;submit&#x22; | &#x22;reset&#x22;" default="button" />

## Exported types

Also exported from `@fanvue/ui`: `AiButtonProps`, `AiButtonSize`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)