How to create reusable button component in ReactJS

In this tutorial, we’ll walk through the process of building a reusable button component in React. We’ll add custom styles and a subtle animation for a polished look, especially when the button is hovered over.

Create the Button Component

​Inside the src folder, create a new file named Button.js for your button component.

// Button.js
import React from 'react';
import './Button.css';

const Button = ({ label, onClick }) => {
  return (
    <button className="custom-button" onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

Add Styles

Create a new file named Button.css in the same directory as your component.

/* Button.css */
.custom-button {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease-in-out;
}

.custom-button:hover {
  background-color: #45a049;
  transform: scale(1.05);
}

These styles define a simple button with a green background that transforms to a slightly darker shade on hover, accompanied by a subtle scaling animation.

Use the Button Component

Now, import and use your Button component wherever needed in your application.

// App.js
import React from 'react';
import Button from './Button';

function App() {
  const handleClick = () => {
    alert('Button Clicked!');
  };

  return (
    <div className="App">
      <h1>Reusable Button Component</h1>
      <Button label="Click me" onClick={handleClick} />
    </div>
  );
}

export default App;

Run Your App

Start your development server to see the button in action.

npm start

Open your browser and navigate to http://localhost:3000. You should see your React app with the reusable button component. Hover over the button to experience the smooth animation.

Congratulations! You’ve successfully created a reusable button component in React with custom styles and a hover animation. Feel free to customize the styles further to match your application’s design.

Creating a reusable button component in React offers several advantages that contribute to more efficient and maintainable code:

1. Consistency Across the Application:
   • A reusable button ensures a consistent look and behavior throughout your application. By using the same button component across different parts of your UI, you establish a unified design language that enhances the overall user experience.
2. Ease of Maintenance:
   • When styles or functionality need to be updated, having a centralized button component makes maintenance easier. Changes made to the component automatically reflect in every instance where it’s used, reducing the likelihood of inconsistencies or errors.
3. Code Reusability:
   • The primary benefit is in the name—reusability. Instead of duplicating button code in various components, you can import and use the reusable button component wherever needed. This promotes a modular and DRY (Don’t Repeat Yourself) approach, saving development time and reducing the risk of introducing bugs.
4. Scalability:
   • As your application grows, having reusable components becomes increasingly valuable. New features or pages that require buttons can seamlessly integrate the existing button component without the need to rewrite or duplicate code.
5. Customization and Theming:
   • A reusable button component can be easily customized or themed according to your application’s design system. By encapsulating styles within the component, you can adapt it to different visual themes without affecting other parts of the application.
6. Consolidated Event Handling:
   • If your buttons share similar functionalities, such as opening a modal or triggering a common action, handling these events in a centralized button component promotes cleaner and more maintainable code. Changes to event handling logic can be made in one place.
7. Collaboration and Development Efficiency:
   • Reusable components facilitate collaboration among team members. Developers can work on different parts of the application, confident that the button component they integrate will behave consistently and adhere to established design principles.
8. Testing and Debugging:
   • Testing becomes more straightforward with reusable components. You can focus on testing the button component in isolation, ensuring that it behaves as expected. Debugging is also simplified, as issues related to the button can be addressed within the component itself.

In summary, creating a reusable button component promotes maintainability, consistency, and scalability in your React application. It aligns with best practices in component-based development, fostering a more organized and efficient codebase.