Toggle Basic

Buttons 1

About

Here is Toggle component

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

Code

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

Usage.tsx

"use client";

import { Toggle } from "@ark-ui/react/toggle";
import { Volume, VolumeX } from "lucide-react";
import { useState } from "react";

export default function ToggleControlled() {
  const [pressed, setPressed] = useState(false);

  return (
    <div className="bg-white dark:bg-gray-800 w-full px-4 py-12 rounded-xl flex flex-col items-center space-y-4">
      <Toggle.Root
        pressed={pressed}
        onPressedChange={setPressed}
        className="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 data-[state=on]:bg-red-100 dark:data-[state=on]:bg-red-900/30 data-[state=on]:text-red-700 dark:data-[state=on]:text-red-300 data-[state=on]:border-red-300 dark:data-[state=on]:border-red-600 transition-all text-sm font-medium"
      >
        {pressed ? (
          <VolumeX className="w-4 h-4" />
        ) : (
          <Volume className="w-4 h-4" />
        )}
        {pressed ? "Muted" : "Unmuted"}
      </Toggle.Root>

      <div className="text-center">
        <p className="text-sm text-gray-600 dark:text-gray-400">
          Volume is{" "}
          <span className="font-medium">{pressed ? "muted" : "unmuted"}</span>
        </p>
        <button
          onClick={() => setPressed(!pressed)}
          className="mt-2 px-3 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
        >
          Toggle Externally
        </button>
      </div>
    </div>
  );
}