# Toggle

A two-state button that can be either on or off.

Page: https://sui.draco.dev/docs/components/toggle

### Example: toggle-demo

```tsx
import { Toggle } from "@workspace/ui/components/toggle";
import { BookmarkIcon } from "lucide-react";

export function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
      <BookmarkIcon className="group-aria-pressed/toggle:fill-current" />
      Bookmark
    </Toggle>
  );
}

export default ToggleDemo;
```

## Installation

```bash
bunx --bun shadcn@latest add @sui/toggle
```

Install with the shadcn CLI or use the shared `@workspace/ui` package. Follow the [installation guide](/docs/installation) to configure the registry, load styles, and choose import aliases.

## Usage

```tsx
import { Toggle } from "@workspace/ui/components/toggle"
```

```tsx
<Toggle>Toggle</Toggle>
```

## Outline

Use `variant="outline"` for an outline style.

### Example: toggle-outline

```tsx
import { Toggle } from "@workspace/ui/components/toggle";
import { BoldIcon, ItalicIcon } from "lucide-react";

export function ToggleOutline() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="outline" aria-label="Toggle italic">
        <ItalicIcon />
        Italic
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle bold">
        <BoldIcon />
        Bold
      </Toggle>
    </div>
  );
}

export default ToggleOutline;
```

## With Text

### Example: toggle-text

```tsx
import { Toggle } from "@workspace/ui/components/toggle";
import { ItalicIcon } from "lucide-react";

export function ToggleText() {
  return (
    <Toggle aria-label="Toggle italic">
      <ItalicIcon />
      Italic
    </Toggle>
  );
}

export default ToggleText;
```

## Size

Use the `size` prop to change the size of the toggle.

### Example: toggle-sizes

```tsx
import { Toggle } from "@workspace/ui/components/toggle";

export function ToggleSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="outline" aria-label="Toggle small" size="sm">
        Small
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle default" size="default">
        Default
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle large" size="lg">
        Large
      </Toggle>
    </div>
  );
}

export default ToggleSizes;
```

## Disabled

### Example: toggle-disabled

```tsx
import { Toggle } from "@workspace/ui/components/toggle";

export function ToggleDisabled() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle aria-label="Toggle disabled" disabled>
        Disabled
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
        Disabled
      </Toggle>
    </div>
  );
}

export default ToggleDisabled;
```

## RTL

To enable RTL support in shadcn/ui, see the [RTL configuration guide](https://ui.shadcn.com/docs/rtl).

### Example: toggle-rtl

```tsx
"use client";

import { Toggle } from "@workspace/ui/components/toggle";
import { BookmarkIcon } from "lucide-react";
import { type Translations, useTranslation } from "./support";

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      label: "Bookmark",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      label: "إشارة مرجعية",
    },
  },
  he: {
    dir: "rtl",
    values: {
      label: "סימנייה",
    },
  },
};

export function ToggleRtl() {
  const { dir, t } = useTranslation(translations, "ar");

  return (
    <Toggle aria-label="Toggle bookmark" size="sm" variant="outline" dir={dir}>
      <BookmarkIcon className="group-aria-pressed/toggle:fill-current" />
      {t.label}
    </Toggle>
  );
}

export default ToggleRtl;
```

## API Reference

See the [Base UI Toggle](https://base-ui.com/react/components/toggle#api-reference) documentation.

- [Documentation](https://base-ui.com/react/components/toggle)
- [API reference](https://base-ui.com/react/components/toggle#api-reference)