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

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

export default function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <svg
        width="16"
        height="16"
        viewBox={`0 0 16 16`}
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden
      >
        <path d={`M4 2.5h5a2.75 2.75 0 0 1 0 5.5H4zM4 8h5.75a2.75 2.75 0 0 1 0 5.5H4z`} />
      </svg>
    </Toggle>
  );
}
```

## Install

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

## Usage

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

## Outline

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

export default function ToggleOutline() {
  return (
    <Toggle variant="outline" aria-label="Toggle italic">
      Italic
    </Toggle>
  );
}
```

## With text

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

export default function ToggleText() {
  return (
    <Toggle aria-label="Toggle italic">
      <svg
        width="16"
        height="16"
        viewBox={`0 0 16 16`}
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden
      >
        <path d={`M6.5 2.5h6M3.5 13.5h6M9.5 2.5l-3 11`} />
      </svg>
      Italic
    </Toggle>
  );
}
```

## Sizes

```tsx
import * as stylex from '@stylexjs/stylex';

import { Toggle } from '@/components/ui/toggle';
import { space } from '@/lib/constants.stylex';

export default function ToggleSizes() {
  return (
    <div {...stylex.props(styles.row)}>
      <Toggle size="sm" aria-label="Toggle bold">
        Small
      </Toggle>
      <Toggle size="md" aria-label="Toggle bold">
        Medium
      </Toggle>
      <Toggle size="lg" aria-label="Toggle bold">
        Large
      </Toggle>
    </div>
  );
}

const styles = stylex.create({
  row: {
    alignItems: 'center',
    display: 'flex',
    gap: space.s2,
  },
});
```

## Disabled

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

export default function ToggleDisabled() {
  return (
    <Toggle disabled aria-label="Toggle bold">
      Bold
    </Toggle>
  );
}
```

## API reference

Built on [Base UI Toggle](https://base-ui.com/react/components/toggle). The table below covers the props this library adds — every other prop (`pressed`, `defaultPressed`, `onPressedChange`, `disabled`, …) is forwarded; see the [Base UI Toggle API reference](https://base-ui.com/react/components/toggle#api-reference).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'default' \| 'outline'` | `'default'` |  |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |  |
| `style` | `StyleXStyles` | — | StyleX styles merged last — always win over the component's own styles. |