How to Make a Toggle Button and Style it in React

Toggle buttons are widely used in web applications to allow users to switch between two states or options. In this blog post, we'll explore how to create a toggle button in React without the need to create a separate component. We'll walk through the process step by step, using simple examples to help you understand the implementation.

Implementing the Toggle Functionality

Inside your project's component where you want to add the toggle functionality, we'll add the code necessary to create a toggle button. Begin by importing React and initializing a state variable to track the toggle status:

import React, { useState } from 'react';

function App() {
  const [isToggled, setIsToggled] = useState(false);

  const handleToggle = () => {
    setIsToggled(!isToggled);
  };

  return (
    <div>
      <button onClick={handleToggle}>
        {isToggled ? 'ON' : 'OFF'}
      </button>
    </div>
  );
}

export default App;

In the code above, we use the useState hook to create a state variable named isToggled and its corresponding setter function, setIsToggled. The initial state is set to false.

The handleToggle function is triggered when the button is clicked. It uses setIsToggled to toggle the value of isToggled between true and false.

The return statement renders a element that displays "ON" when isToggled is true, and "OFF" when isToggled is false. Clicking the button invokes the handleToggle function, updating the toggle state accordingly.

Styling the Toggle Button

To improve the visual appeal of the toggle button, you can apply CSS styles. Add the following CSS code to your project's CSS file or the App.js file:

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  background-color: #ddd;
}

button.on {
  background-color: #5cb85c; 
  color: white;
}

button.off {
  background-color: #d9534f;
  color: white;
}

Let's break down what each CSS rule does:

1) button: This rule sets the base styling for all elements. The specified properties will be applied to any button element in your React application.

• padding: 10px 20px;: It sets the padding of the button to 10 pixels on the top and bottom and 20 pixels on the left and right
• border: none;: It removes the border from the button element
• border-radius: 5px;: It applies a border radius of 5 pixels to give the button rounded corners
• font-size: 16px;: It sets the font size of the button text to 16 pixels
• cursor: pointer;: It changes the mouse cursor to a pointer when hovering over the button, indicating that it can be clicked
• background-color: #ddd;: It sets the background color of the button to a light gray (#ddd)

2) button.on: This rule applies additional styling to the element when it has the class name "on". This class can be dynamically added to the button based on the state or other conditions in your React code.

• background-color: #5cb85c;: It sets the background color of the button to a specific shade of green (#5cb85c) when it has the "on" class
• color: white;: It sets the text color of the button to white when it has the "on" class

3) button.off: This rule applies additional styling to the element when it has the class name "off". Like the "on" class, the "off" class can also be added dynamically based on certain conditions.

• background-color: #d9534f;: It sets the background color of the button to a specific shade of red (#d9534f) when it has the "off" class
• color: white;: It sets the text color of the button to white when it has the "off" class
• By using different class names on the button dynamically based on the state or other conditions in your React code, you can apply different styles to the button to visually represent different states or options

Happy coding!