Toggle — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to React Aria.

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download toggle -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
<Toggle variant="default" size="default" isDisabled={false} aria-label="Toggle bold">
  <Icon name="Bold" />
</Toggle>;

Examples

Default

import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
<Toggle  aria-label="Toggle bold">
  <Icon name="Bold" />
</Toggle>;

Outline

import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
<Toggle variant="outline" aria-label="Toggle italic">
  <Icon name="Italic" />
</Toggle>;

With Text

import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
<Toggle aria-label="Toggle italic">
  <Icon name="Italic" /> Italic
</Toggle>;

Small

import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
<Toggle size="sm" aria-label="Toggle bold">
  <Icon name="Bold" />
</Toggle>;

Large

import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
<Toggle size="lg" aria-label="Toggle bold">
  <Icon name="Bold" />
</Toggle>;

Disabled

import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
<Toggle isDisabled aria-label="Toggle bold">
  <Icon name="Bold" />
</Toggle>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Size of the toggle.
`variant`	`"default" \| "outline"`	`"default"`	Visual style of the toggle.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.