Toggle

A toggle component that can be pressed and unpressed, often used for toolbars or formatting options.

1. Import

Import the Toggle component from the design system.

import { Toggle } from "@/design-system/components/ui/toggle"

2. Props

Toggle component props.

Prop	Type	Default
pressed	boolean	false
defaultPressed	boolean	false
onPressedChange	(pressed: boolean) => void	--
disabled	boolean	false
className	string	--

3. Usages

Common Toggle patterns and configurations.

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

export function ToggleDemo() {
  return (
    <div className="flex gap-2">
      <Toggle variant="outline" aria-label="Toggle bold">
        <Bold className="h-4 w-4" />
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </Toggle>
    </div>
  );
}