A pressable button that switches between an active and inactive state on each click.

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

export default function ToggleDemo() {
  return <Toggle>Toggle</Toggle>;
}

Installation

Usage

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

Examples

Outline

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

export default function ToggleOutline() {
  return <Toggle variant="outline">Toggle</Toggle>;
}

Small

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

export default function ToggleSm() {
  return <Toggle size="sm">Toggle</Toggle>;
}

Large

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

export default function ToggleLg() {
  return <Toggle size="lg">Toggle</Toggle>;
}

With Icon

Loading...
import { Toggle } from "@/components/ui/toggle";
import { BoldIcon } from "lucide-react";

export default function ToggleWithIcon() {
  return (
    <Toggle>
      <BoldIcon />
    </Toggle>
  );
}

Disabled

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

export default function ToggleDisabled() {
  return <Toggle disabled>Toggle</Toggle>;
}