Toggle Button

An animated button component that toggles between two states, with smooth transitions and customizable text and icons.

Usage

import ToggleButton from '@/components/ToggleButton';
import { Heart } from 'lucide-react';

export default function MyPage() {
  const handleToggle = () => {
    console.log('Button was toggled!');
  };

  return (
    <ToggleButton 
      initialText="Like"
      toggledText="Liked"
      icon={<Heart size={16} />}
      toggledIcon={<Heart size={16} fill="#fff" />}
      onClick={handleToggle}
    />
  );
}

Examples

Basic Toggle Button

A simple toggle button with default styling.

<ToggleButton 
  initialText="Follow"
  toggledText="Following"
/>

Toggle Button with Custom Icons

Using custom icons for both states.

<ToggleButton 
  initialText="Light"
  toggledText="Dark"
  icon={<Sun className="mr-2" size={16} />}
  toggledIcon={<Moon className="mr-2" size={16} />}
/>

Small Toggle Button

A smaller version with custom styling.

<ToggleButton 
  initialText="Notify"
  toggledText="Notifying"
  icon={<Bell className="mr-2" size={14} />}
  toggledIcon={<Bell className="mr-2" size={14} />}
  className="px-4 py-1.5 min-w-[120px] text-sm"
/>