Toggle

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

export default function Particle() {
  return <Toggle>Переключить</Toggle>;
}

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

export default function Particle() {
  return <Toggle variant="outline">Переключатель с обводкой</Toggle>;
}

import { IconBold } from "@tabler/icons-react";
import { Toggle } from "@/components/ui/toggle";

export default function Particle() {
  return (
    <Toggle aria-label="Полужирный" variant="outline">
      <IconBold stroke={1.5} />
    </Toggle>
  );
}

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

export default function Particle() {
  return (
    <Toggle size="sm" variant="outline">
      Маленький
    </Toggle>
  );
}

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

export default function Particle() {
  return (
    <Toggle size="lg" variant="outline">
      Большой
    </Toggle>
  );
}

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

export default function Particle() {
  return (
    <Toggle disabled variant="outline">
      Недоступно
    </Toggle>
  );
}

import { IconBold, IconItalic, IconUnderline } from "@tabler/icons-react";
import { Toggle } from "@/components/ui/toggle";

export default function Particle() {
  return (
    <div className="flex items-center gap-1">
      <Toggle aria-label="Полужирный" variant="outline">
        <IconBold stroke={1.5} />
      </Toggle>
      <Toggle aria-label="Курсив" variant="outline">
        <IconItalic stroke={1.5} />
      </Toggle>
      <Toggle aria-label="Подчёркнутый" variant="outline">
        <IconUnderline stroke={1.5} />
      </Toggle>
    </div>
  );
}