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

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/toggle/toggle-demo.astro"
---
import BookmarkIcon from "@lucide/astro/icons/bookmark"

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

<Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
  <BookmarkIcon class="group-aria-pressed/toggle:fill-foreground" />
  Bookmark
</Toggle>
```

## Installation

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

## Usage

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

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

`Toggle` renders a `button` with `aria-pressed`. Use `defaultPressed` for the
initial state. Style the pressed state with `aria-pressed:` or, on children,
`group-aria-pressed/toggle:`.

## Outline

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

```astro title="src/components/examples/toggle/toggle-outline.astro"
---
import BoldIcon from "@lucide/astro/icons/bold"
import ItalicIcon from "@lucide/astro/icons/italic"

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

<div class="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>
```

## With Text

```astro title="src/components/examples/toggle/toggle-text.astro"
---
import ItalicIcon from "@lucide/astro/icons/italic"

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

<Toggle aria-label="Toggle italic">
  <ItalicIcon />
  Italic
</Toggle>
```

## Size

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

```astro title="src/components/examples/toggle/toggle-sizes.astro"
---
import { Toggle } from "@/components/ui/toggle"
---

<div class="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>
```

## Disabled

```astro title="src/components/examples/toggle/toggle-disabled.astro"
---
import { Toggle } from "@/components/ui/toggle"
---

<div class="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>
```

## RTL

Set `dir="rtl"` on the toggle or a parent element.

```astro title="src/components/examples/toggle/toggle-rtl.astro"
---
import BookmarkIcon from "@lucide/astro/icons/bookmark"

import { Toggle } from "@/components/ui/toggle"

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

const { dir, values: t } = translations.ar
---

<Toggle aria-label="Toggle bookmark" size="sm" variant="outline" dir={dir}>
  <BookmarkIcon class="group-aria-pressed/toggle:fill-foreground" />
  {t.label}
</Toggle>
```

## API Reference

Source: [`src/components/ui/toggle`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/toggle)

| Prop             | Type                        | Default     |
| ---------------- | --------------------------- | ----------- |
| `variant`        | `"default" \| "outline"`    | `"default"` |
| `size`           | `"default" \| "sm" \| "lg"` | `"default"` |
| `defaultPressed` | `boolean`                   | `false`     |
| `disabled`       | `boolean`                   | `false`     |

`toggleVariants` gives the same classes to a custom element. See the
[data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/toggle/README.md)
for events such as `toggle:change`.

## Install what this page shows

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