Toggle

npm install @kuzenbo/core

import { Toggle } from "@kuzenbo/core";
import { BoldIcon } from "lucide-react";

function Example() {
  return (
    <Toggle aria-label="Toggle bold">
      <BoldIcon />
    </Toggle>
  );
}

<Toggle aria-label="Toggle italic">
  <ItalicIcon />
</Toggle>

<Toggle aria-label="Toggle bold">
  <BoldIcon />
  Bold
</Toggle>

<Toggle variant="outline" aria-label="Toggle underline">
  <UnderlineIcon />
</Toggle>

<div className="flex items-center gap-2">
  <Toggle size="xs" aria-label="Extra small">
    <BoldIcon />
  </Toggle>
  <Toggle size="sm" aria-label="Small">
    <BoldIcon />
  </Toggle>
  <Toggle size="md" aria-label="Medium">
    <BoldIcon />
  </Toggle>
  <Toggle size="lg" aria-label="Large">
    <BoldIcon />
  </Toggle>
  <Toggle size="xl" aria-label="Extra large">
    <BoldIcon />
  </Toggle>
</div>

const [pressed, setPressed] = useState(false);

<Toggle
  pressed={pressed}
  onPressedChange={setPressed}
  aria-label="Toggle bold"
>
  <BoldIcon />
</Toggle>

<Toggle disabled aria-label="Toggle bold">
  <BoldIcon />
</Toggle>

function TextFormatting() {
  return (
    <div className="flex gap-1">
      <Toggle aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>
      <Toggle aria-label="Toggle italic">
        <ItalicIcon />
      </Toggle>
      <Toggle aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
      <Toggle aria-label="Toggle strikethrough">
        <StrikethroughIcon />
      </Toggle>
    </div>
  );
}