Interactive Toggle Button

Build a reusable button component that manages internal state and communicates with parent components through callbacks.

Requirements

Create a custom button component with the following features:

1. Component Structure

   • Export a reusable button component named appropriately
   • The component should maintain an internal "active" state (boolean)
   • Accept a text label to display
   • Accept an optional callback that fires when the state changes

2. State Management

   • The button starts in an inactive state (false)
   • Clicking the button toggles between active and inactive states
   • When the state changes, call the parent's callback (if provided) with the new state value

3. Visual Feedback

   • Apply different styling when the button is active vs inactive
   • Support an optional custom CSS class name passed as a prop

Test Cases

• Clicking the button toggles its active state from false to true and back @test
• The button displays the provided text label @test
• The parent callback is invoked with the new state value when toggled @test
• Custom CSS class names are applied alongside state-based styling @test

Implementation

@generates

API

/**
 * A toggle button component that manages active/inactive state
 *
 * @param {Object} props - Component properties
 * @param {string} props.label - The text label to display on the button
 * @param {Function} [props.onStateChange] - Optional callback invoked with new state (boolean) when toggled
 * @param {string} [props.className] - Optional CSS class name(s) to apply
 * @returns {JSX.Element} The rendered button element
 */
export function ToggleButton(props) {
  // IMPLEMENTATION HERE
}

Dependencies { .dependencies }

react { .dependency }

Provides the component framework and state management.