Fanvue API Documentation

import { SwitchButton } from "@fanvue/ui";
import type {
  SwitchButtonAiProps,
  SwitchButtonDefaultProps,
  SwitchButtonProps,
  SwitchButtonSize,
  SwitchButtonVariant,
} from "@fanvue/ui";

Examples

Default

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

<SwitchButton label="CTA" size="40" variant="default" />

Disabled

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

<SwitchButton label="CTA" size="40" variant="default" disabled />

Sizes

import { SwitchButton } from "@fanvue/ui";
import type { SwitchButtonSize } from "@fanvue/ui";

const SIZES: SwitchButtonSize[] = ["40", "32", "24"];

<div className="flex flex-col gap-6">
  {SIZES.map((size) => (
    <div key={size} className="flex items-center gap-4">
      <span className="typography-description-12px-regular w-10 text-content-secondary">
        {size}px
      </span>
      <SwitchButton size={size} label="CTA" />
      <SwitchButton size={size} label="CTA" defaultPressed />
      <SwitchButton size={size} variant="ai" label="CTA" />
      <SwitchButton size={size} variant="ai" label="CTA" defaultPressed />
    </div>
  ))}
</div>

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.

import { SwitchButton } from "@fanvue/ui";
import type { SwitchButtonSize } from "@fanvue/ui";

const SIZES: SwitchButtonSize[] = ["40", "32", "24"];

<div className="flex flex-col gap-6">
  {SIZES.map((size) => (
    <div key={size} className="flex items-center gap-4">
      <span className="typography-description-12px-regular w-10 text-content-secondary">
        {size}px
      </span>
      <SwitchButton size={size} label="Neither" />
      <SwitchButton size={size} label="Left" showLeftIcon />
      <SwitchButton size={size} label="Right" showRightIcon />
      <SwitchButton size={size} label="Both" showLeftIcon showRightIcon />
    </div>
  ))}
</div>

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.

import { SwitchButton } from "@fanvue/ui";
import type { SwitchButtonSize } from "@fanvue/ui";

const SIZES: SwitchButtonSize[] = ["40", "32", "24"];

const HOVER_CLASS = "bg-buttons-switch-hover";

<div className="flex flex-col gap-8">
  {(["default", "ai"] as const).map((variant) => (
    <div key={variant} className="flex flex-col gap-4">
      <span className="typography-body-small-14px-semibold text-content-secondary">
        {variant === "ai" ? "AI" : "Default"}
      </span>
      <div className="grid grid-cols-[3rem_repeat(4,minmax(6rem,auto))] items-center justify-items-start gap-x-4 gap-y-3">
        <span />
        {["Inactive", "Hover", "Active", "Disabled"].map((state) => (
          <span
            key={state}
            className="typography-description-12px-regular text-content-secondary"
          >
            {state}
          </span>
        ))}
        {SIZES.map((size) => (
          <div key={size} className="col-span-5 grid grid-cols-subgrid items-center">
            <span className="typography-description-12px-regular text-content-secondary">
              {size}px
            </span>
            <SwitchButton variant={variant} size={size} label="CTA" />
            <SwitchButton
              variant={variant}
              size={size}
              label="CTA"
              className={HOVER_CLASS}
              tabIndex={-1}
            />
            <SwitchButton variant={variant} size={size} label="CTA" defaultPressed />
            <SwitchButton variant={variant} size={size} label="CTA" disabled />
          </div>
        ))}
      </div>
    </div>
  ))}
</div>

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 <button> carrying aria-pressed — the ARIA toggle-button pattern — so it flips on click and on Enter or Space, and exposes data-state="on" | "off" for styling. Supports controlled (pressed) and uncontrolled (defaultPressed) usage. The visible label is the accessible name, so no aria-label is needed. For two or three mutually exclusive options, reach for SegmentedControl instead: this button is independently on or off, not a choice between options.

string

required

Visible text label, which is also the accessible name.

boolean

default:"false"

Initial on/off state for uncontrolled usage.

ReactNode

default:"<AddIcon size={16} />"

Icon rendered before the label when showLeftIcon is set. Unavailable on "ai" — the leading sparkle is fixed.

((pressed: boolean) => void)

Fired with the next state each time the button flips.

boolean

On/off state for controlled usage. Pair with onPressedChange.

ReactNode

default:"<AddIcon size={16} />"

Icon rendered after the label when showRightIcon is set. Unavailable on "ai" — this variant has no trailing icon slot.

boolean

default:"false"

Show an icon before the label. Unavailable on "ai" — the leading sparkle is always shown and cannot be swapped.

boolean

default:"false"

Show an icon after the label. Unavailable on "ai" — this variant has no trailing icon slot.

"24" | "32" | "40"

default:"32"

Height of the button in pixels.

"button" | "submit" | "reset"

default:"button"

Native button behaviour.

"default" | "ai"

default:"default"

Visual treatment.

Exported types

Also exported from @fanvue/ui: SwitchButtonAiProps, SwitchButtonDefaultProps, SwitchButtonProps, SwitchButtonSize, SwitchButtonVariant.

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

SwitchButton

Examples

Default

Disabled

Sizes

Icon slots

Matrix

Props

SwitchButton

Exported types

​Examples

​Default

​Disabled

​Sizes

​Icon slots

​Matrix

​Props

​SwitchButton

​Exported types

Examples

Default

Disabled

Sizes

Icon slots

Matrix

Props

SwitchButton

Exported types