IndevuiToggle

Buttons 2

About

Here is indevui toggle component

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

Code

How IndevuiToggle is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import { Bold, Italic, Underline, Wifi } from 'lucide-react';
import Toggle from '@/components/ui/indevui-toggle';

function ToggleDemo() {
  return (
    <div className="flex flex-col items-start gap-8 p-4">
      <div className="flex items-end gap-4">
        <Toggle size="sm" aria-label="Toggle bold">
          <Bold />
        </Toggle>
        <Toggle aria-label="Toggle italic">
          <Italic />
        </Toggle>
        <Toggle size="lg" aria-label="Toggle underline">
          <Underline />
        </Toggle>
      </div>
      <div className="flex items-end gap-4">
        <Toggle variant="outline" size="sm" aria-label="Toggle bold">
          <Bold />
        </Toggle>
        <Toggle variant="outline" aria-label="Toggle italic">
          <Italic />
        </Toggle>
        <Toggle variant="outline" size="lg" aria-label="Toggle underline">
          <Underline />
        </Toggle>
      </div>
      <div className="flex items-end gap-4">
        <Toggle aria-label="Toggle Wi-Fi">
          <Wifi />
          <span className="sr-only">Wi-Fi</span>
        </Toggle>
        <Toggle aria-label="Toggle Wi-Fi with text">
          <Wifi />
          Wi-Fi
        </Toggle>
        <Toggle disabled aria-label="Toggle Wi-Fi disabled">
          <Wifi />
          Wi-Fi
        </Toggle>
      </div>
    </div>
  );
}

export { ToggleDemo as DemoOne };