> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Toggle

> Two-state on/off toggle control.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/toggle-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=4e3a4b8bf0ed99ad3e612adffb672d92" alt="Toggle component preview (light)" width="240" data-path="images/ui/toggle-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/toggle.tsx`

## When to use

* Binary on/off or pressed/unpressed states (e.g., bold/italic, filters).
* Use a Switch for form field true/false; Toggle is for quick UI actions.

## Usage

```tsx sabo/src/components/ui/toggle.tsx theme={null}
import { Toggle } from "@/components/ui/toggle";

export function Example() {
  return (
    <div className="space-x-2">
      <Toggle aria-label="Bold">Bold</Toggle>
      <Toggle variant="outline" size="sm">Italic</Toggle>
      <Toggle defaultPressed>On</Toggle>
    </div>
  );
}
```

## Key props

<ParamField path="variant" type="string">
  <code>default</code> | <code>outline</code>
</ParamField>

<ParamField path="size" type="string">
  <code>default</code> | <code>sm</code> | <code>lg</code>
</ParamField>

<ParamField path="defaultPressed" type="boolean">
  Initial pressed state. The element reflects state via <code>data-state="on" or "off"</code>.
</ParamField>

## Styling tip

* Use <code>data-\[state=on]:...</code> selectors to style the on‑state for icons/text.
* Combine with tooltips or labels for clarity in icon‑only toggles.

## Accessibility

* Provide an <code>aria-label</code> for icon‑only toggles.
* Ensure clear contrast for both on/off states and visible focus outlines.