> ## 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.
# SwitchButton
> A labelled pill that switches one feature or mode on and off, for settings panels, filter bars and tool options.
```tsx theme={null}
import { SwitchButton } from "@fanvue/ui";
import type {
SwitchButtonAiProps,
SwitchButtonDefaultProps,
SwitchButtonProps,
SwitchButtonSize,
SwitchButtonVariant,
} from "@fanvue/ui";
```
## Examples
## Default
```tsx theme={null}
import { SwitchButton } from "@fanvue/ui";
```
## Disabled
```tsx theme={null}
import { SwitchButton } from "@fanvue/ui";
```
## Sizes
```tsx theme={null}
import { SwitchButton } from "@fanvue/ui";
import type { SwitchButtonSize } from "@fanvue/ui";
const SIZES: SwitchButtonSize[] = ["40", "32", "24"];
{SIZES.map((size) => (
{size}px
))}
```
## Icon slots
`showLeftIcon` and `showRightIcon` are independent booleans, each rendering the add glyph on that side. Both are available on the `default` variant only — the `ai` variant types them as `never`, since its sparkle is fixed and it has no trailing slot.
```tsx theme={null}
import { SwitchButton } from "@fanvue/ui";
import type { SwitchButtonSize } from "@fanvue/ui";
const SIZES: SwitchButtonSize[] = ["40", "32", "24"];
{SIZES.map((size) => (
{size}px
))}
```
## Matrix
Mirrors the `V2 Toggle` Figma frame: every size against every state, for both variants. The hover column is painted with the hover token directly, since a real `:hover` cannot be held open in a static snapshot — move the pointer over the inactive column to see the genuine transition.
```tsx theme={null}
import { SwitchButton } from "@fanvue/ui";
import type { SwitchButtonSize } from "@fanvue/ui";
const SIZES: SwitchButtonSize[] = ["40", "32", "24"];
const HOVER_CLASS = "bg-buttons-switch-hover";
```
## Props
## SwitchButton
A labelled pill that switches one feature or mode on and off, for settings panels, filter bars and tool options. Unlike `Switch` it names the thing it controls, which suits contexts where the action needs spelling out.
Rendered as a `