Toggle

Copyimport { BookmarkFilledIcon, BookmarkIcon } from "blode-icons-react";
import { Toggle } from "@/components/ui/toggle";
 
export function ToggleDemo() {
  return (
    <Toggle
      aria-label="Toggle bookmark"
      render={(props, state) => (
        <button type="button" {...props}>
          {state.pressed ? <BookmarkFilledIcon /> : <BookmarkIcon />}
          Bookmark
        </button>
      )}
      size="sm"
      variant="outline"
    />
  );
}

Copyimport { BookmarkFilledIcon, BookmarkIcon } from "blode-icons-react";
import { Toggle } from "@/components/ui/toggle";
 
export function ToggleDemo() {
  return (
    <Toggle
      aria-label="Toggle bookmark"
      render={(props, state) => (
        <button type="button" {...props}>
          {state.pressed ? <BookmarkFilledIcon /> : <BookmarkIcon />}
          Bookmark
        </button>
      )}
      size="sm"
      variant="outline"
    />
  );
}

Copyimport { BoldIcon, ItalicIcon } from "blode-icons-react";
import { Toggle } from "@/components/ui/toggle";
 
export function ToggleOutline() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle aria-label="Toggle italic" variant="outline">
        <ItalicIcon />
        Italic
      </Toggle>
      <Toggle aria-label="Toggle bold" variant="outline">
        <BoldIcon />
        Bold
      </Toggle>
    </div>
  );
}

Copyimport { ItalicIcon } from "blode-icons-react";
import { Toggle } from "@/components/ui/toggle";
 
export function ToggleText() {
  return (
    <Toggle aria-label="Toggle italic">
      <ItalicIcon />
      Italic
    </Toggle>
  );
}

Copyimport { Toggle } from "@/components/ui/toggle";
 
export function ToggleSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle aria-label="Toggle small" size="sm" variant="outline">
        Small
      </Toggle>
      <Toggle aria-label="Toggle default" size="default" variant="outline">
        Default
      </Toggle>
      <Toggle aria-label="Toggle large" size="lg" variant="outline">
        Large
      </Toggle>
    </div>
  );
}

Copyimport { Toggle } from "@/components/ui/toggle";
 
export function ToggleSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle aria-label="Toggle small" size="sm" variant="outline">
        Small
      </Toggle>
      <Toggle aria-label="Toggle default" size="default" variant="outline">
        Default
      </Toggle>
      <Toggle aria-label="Toggle large" size="lg" variant="outline">
        Large
      </Toggle>
    </div>
  );
}

Copyimport { Toggle } from "@/components/ui/toggle";
 
export function ToggleDisabled() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle aria-label="Toggle disabled" disabled>
        Disabled
      </Toggle>
      <Toggle aria-label="Toggle disabled outline" disabled variant="outline">
        Disabled
      </Toggle>
    </div>
  );
}