Toggle

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

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

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

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

import { BoldIcon } from "lucide-react";

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

export default function Particle() {
  return (
    <Toggle aria-label="Toggle bold" variant="outline">
      <BoldIcon />
    </Toggle>
  );
}

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

export default function Particle() {
  return (
    <Toggle size="sm" variant="outline">
      Small
    </Toggle>
  );
}

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

export default function Particle() {
  return (
    <Toggle size="lg" variant="outline">
      Large
    </Toggle>
  );
}

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

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

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";

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

export default function Particle() {
  return (
    <div className="flex items-center gap-1">
      <Toggle aria-label="Toggle bold" variant="outline">
        <BoldIcon />
      </Toggle>
      <Toggle aria-label="Toggle italic" variant="outline">
        <ItalicIcon />
      </Toggle>
      <Toggle aria-label="Toggle underline" variant="outline">
        <UnderlineIcon />
      </Toggle>
    </div>
  );
}