# Toggle

> A two-state button (Radix toggle) that stays pressed until clicked again.

## Facts

- **Product**: Crew OS
- **Family**: Actions
- **Global**: `window.DigitalCrew.Toggle`
- **Source**: `digitalcrew-orchestrator: components/ui/toggle.tsx`
- **Import in the app**: `import { Toggle } from "@/components/ui/toggle";`
- **Live preview**: /design/components/toggle/preview.html
- **Page**: /design/components/toggle

## Guidelines

**Use it for** a single on/off view option in a toolbar: unread only, hot leads, mute notifications. For a choice among several options use [`ToggleGroup`](/design/components/toggle-group.md); for a setting that takes effect immediately use [`Switch`](/design/components/switch.md).

**What you provide**: `pressed`/`onPressedChange` or `defaultPressed`, `variant` (`default`, `outline`; default `default`), `size` (`default`, `sm`, `lg`), `disabled`, children (a 16px icon, a label or both) and an `aria-label` for icon-only toggles. `toggleVariants` is exported for styling other elements the same way.

**Anatomy**: `rounded-md`, `text-sm font-medium`, 8px icon–label gap, icons `size-4`. Sizes: default 36px tall and wide at least (`h-9 px-2 min-w-9`), `sm` 32px (`px-1.5`), `lg` 40px (`px-2.5`). `default` is transparent; `outline` adds a 1px `border-input` and `shadow-xs`. Hover is `bg-muted text-muted-foreground` (`outline`: `bg-accent`). Pressed (`data-state=on`) is `bg-accent text-accent-foreground`. Focus shows a 3px `ring-ring/50`; disabled is 50% opacity. Only colour and shadow transition.

**Don't** rely on the pressed colour alone in dense toolbars (pair it with a label or tooltip), or use a toggle to trigger an action.

## API

```ts
declare const toggleVariants: (props?: {
    variant?: "default" | "outline";
    size?: "default" | "lg" | "sm";
} & ClassProp) => string;
declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): any;
export { Toggle, toggleVariants };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h("div", { className: "grid gap-5" },
      h("div", { className: "flex flex-wrap items-center gap-2" },
        h(DC.Toggle, { defaultPressed: true, "aria-label": "Unread only" }, h(I.Inbox), "Unread only"),
        h(DC.Toggle, { "aria-label": "Hot leads" }, h(I.Flame), "Hot leads"),
        h(DC.Toggle, { variant: "outline", defaultPressed: true, "aria-label": "Meetings" }, h(I.Calendar), "Meetings"),
        h(DC.Toggle, { variant: "outline", "aria-label": "Tasks" }, h(I.ListChecks), "Tasks")),
      h("div", { className: "flex items-center gap-2" },
        h(DC.Toggle, { size: "sm", variant: "outline", "aria-label": "Mute notifications" }, h(I.Bell)),
        h(DC.Toggle, { size: "default", variant: "outline", defaultPressed: true, "aria-label": "Mute notifications" }, h(I.Bell)),
        h(DC.Toggle, { size: "lg", variant: "outline", "aria-label": "Mute notifications" }, h(I.Bell))));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Actions

- [Badge](/design/components/badge.md): A small pill label: count, channel, state or tag (Max's `components/ui/badge.tsx`).
- [Button](/design/components/button.md): The action control for both products: filled with `primary` by default, in six variants and six sizes (Max's `components/ui/button.tsx`).
- [GlassButton](/design/components/glass-button.md): The Crew OS button with a frosted-glass finish: the same variants, sizes and `asChild` as `Button`, plus a backdrop blur and a soft highlight layer.
- [ToggleGroup](/design/components/toggle-group.md): A segmented set of toggles (Radix toggle group) where one or several options are on at a time.