Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Toggle
description: A two-state button that can be either on or off.
---

import { Icon } from "@/components/ui/icon"

```astro live props={{ name: 'toggle' }}
---
import { Icon } from "@/components/ui/icon"
import { Toggle } from "@/components/ui/toggle"
---

<Toggle aria-label="Toggle bold">
  <Icon name="bold" />
</Toggle>
```

## Installation

```bash
npx shadcn@latest add @fulldev/toggle
```

## Usage

```astro
---
import { Toggle } from "@/components/ui/toggle"
---
```

```astro
<Toggle>Toggle</Toggle>
```

## Examples

```astro live
---
import { Icon } from "@/components/ui/icon"
import { Toggle } from "@/components/ui/toggle"
---

<Toggle variant="outline" aria-label="Toggle italic">
  <Icon name="italic" />
</Toggle>
```

```astro live
---
import { Icon } from "@/components/ui/icon"
import { Toggle } from "@/components/ui/toggle"
---

<div class="flex items-center gap-2">
  <Toggle size="sm" aria-label="Toggle bold">
    <Icon name="bold" />
  </Toggle>
  <Toggle size="default" aria-label="Toggle italic">
    <Icon name="italic" />
  </Toggle>
  <Toggle size="lg" aria-label="Toggle underline">
    <Icon name="underline" />
  </Toggle>
</div>
```

```astro live
---
import { Icon } from "@/components/ui/icon"
import { Toggle } from "@/components/ui/toggle"
---

<Toggle disabled aria-label="Toggle underline">
  <Icon name="underline" />
</Toggle>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/toggle) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/toggle/README.md) for more information on interactivity.