# Toggle

On/off control that shows as a switch, or as a button whose fill spreads out from where you press. Turning off fades the fill back, and a disabled toggle flickers once when tapped.

> Primitive · Free · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add toggle
```

## Import

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

## Variants

- `button` — Button: `npx @lumioui/cli add toggle-button`
- `connectivity` — Connectivity: `npx @lumioui/cli add toggle-connectivity`
- `glass` — Glass: `npx @lumioui/cli add toggle-glass`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `pressed?` | `boolean` | Controlled pressed/checked state. Omit with defaultPressed for  uncontrolled use. |
| `defaultPressed?` | `boolean` | Initial pressed state (uncontrolled). Default false. |
| `onPressedChange?` | `(pressed: boolean) => void` | Called when the user toggles. |
| `style?` | `"button" | "switch"` | Toggle style — "button" renders a pill toggle, "switch" renders a Switch. |
| `glass?` | `boolean` | Glass pill (button style only). |
| `haptic?` | `"selection" | "light" | false` | Haptic feedback. Default "selection". Set false to disable. |
| `icon?` | `React.ReactNode` | Icon rendered before the label (button style only). |
| `iconOn?` | `React.ReactNode` | Icon in its "on" ink (button style only). When given, it crossfades over `icon` as the fill covers the pill, so the glyph's ink follows the light instead of flipping before it arrives. |
| `textClassName?` | `string` | Extra classes for the label. |
| `className?` | `string` | Extra classes for the container. |
| `children?` | `React.ReactNode` | Optional label text. In switch style, renders to the left of the switch. |
| `disabled?` | `boolean` | Disable interaction. A tap flickers and warns. |

Source: https://lumioui.com/components/toggle