Toggle

A two-state toggle button built on Base UI's Toggle primitive. Ships default and outline variants, three sizes (sm, default, lg), controlled or uncontrolled pressed state via pressed / defaultPressed, disabled styling, and springy pressed feedback. Works as a single button or grouped into a formatting toolbar. Re-exports TogglePrimitive for advanced composition.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Toggle to your project and fits it to your theme.

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import { Toggle } from "@/components/ui/cnippet-toggle";

export default function ToggleDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Toggle aria-label="Toggle bold" defaultPressed>
        <BoldIcon />
      </Toggle>
      <Toggle aria-label="Toggle italic">
        <ItalicIcon />
      </Toggle>
      <Toggle aria-label="Toggle underline">
        <UnderlineIcon />
      </Toggle>
    </div>
  );
}