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; for a setting that takes effect immediately use Switch.

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.

Facts#

Group	Actions
Product	Crew OS
Global	window.DigitalCrew.Toggle
Source	digitalcrew-orchestrator: components/ui/toggle.tsx
Import in the app	import { Toggle } from "@/components/ui/toggle";

API#

TypeScript declarations emitted from components/ui/toggle.tsx (the module also exports Toggle, toggleVariants).

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#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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#