Toggle

Form

A pressed button for independent on/off choices.

Default and outlineControlled bookmarkDisabled

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

toggle.tsx

"use client";

import { Toggle } from "@/components/ui/toggle";
import { Bold, Italic, Bookmark } from "lucide-react";
import { useState } from "react";

export default function ToggleExample() {
  const [saved, setSaved] = useState(false);
  return (
    <div className="space-y-5">
      <div className="flex gap-2">
        <Toggle aria-label="Bold" variant="outline">
          <Bold aria-hidden />
        </Toggle>
        <Toggle aria-label="Italic" variant="outline">
          <Italic aria-hidden />
        </Toggle>
        <Toggle disabled aria-label="A formatting unavailable">
          A
        </Toggle>
      </div>
      <Toggle pressed={saved} onPressedChange={setSaved} variant="outline">
        <Bookmark aria-hidden />
        {saved ? "Saved" : "Save article"}
      </Toggle>
      <p className="text-xs text-muted-foreground">
        Toggle each formatting option independently.
      </p>
    </div>
  );
}

Usage

Use Toggle for an independent binary action such as bookmarking or text formatting. pressed/onPressedChange controls the state; defaultPressed initializes uncontrolled use. Toggle is a button, not a form checkbox.

Import

import { Toggle } from "@/components/ui/toggle";

Shipped as editable source in src/components/ui/toggle.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

src/components/ui/toggle.tsx

"use client";

import type { ComponentProps } from "react";
import { cn } from "@dashboardpack/core/lib/utils";

import { Toggle as Primitive } from "radix-ui";
export function Toggle({
  className,
  variant = "default",
  size = "default",
  ...props
}: ComponentProps<typeof Primitive.Root> & {
  variant?: "default" | "outline";
  size?: "sm" | "default" | "lg";
}) {
  return (
    <Primitive.Root
      className={cn(
        "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring data-[state=on]:bg-primary/10 data-[state=on]:text-foreground disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
        variant === "outline" && "border",
        size === "sm"
          ? "h-8 min-w-8 px-2"
          : size === "lg"
            ? "h-11 min-w-11 px-4"
            : "h-9 min-w-9 px-3",
        className,
      )}
      {...props}
    />
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Toggle props
Prop	Type / Default	Description
pressed / defaultPressed	`boolean` Default: false	Controlled or initial pressed state.
onPressedChange	`(pressed: boolean) => void` Default: —	Respond to state changes.
variant	`default \| outline` Default: default	Surface treatment.
size	`sm \| default \| lg` Default: default	Control dimensions.
disabled	`boolean` Default: false	Prevent toggling.

Build with these too

ToggleGroup Switch