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

```tsx
import * as stylex from '@stylexjs/stylex';
import { Bold } from 'lucide-react';

import { Toggle } from '@/components/ui/toggle';
import { icon } from '@/lib/stylex-utils';

export default function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <Bold {...stylex.props(icon.md)} />
    </Toggle>
  );
}
```

## Install

```bash
npx @madeui/cli add 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 * as stylex from '@stylexjs/stylex';
import { Italic } from 'lucide-react';

import { Toggle } from '@/components/ui/toggle';
import { icon } from '@/lib/stylex-utils';

export default function ToggleText() {
  return (
    <Toggle aria-label="Toggle italic">
      <Italic {...stylex.props(icon.md)} />
      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. |