Create a Reusable Button Component with custom styles in React

In this tutorial I am going to show you how to create a reusable button component in React.

Prerequisites

How to create React Project

New file for button component

Create a new file in your React project under the folder path src, for example, “Button.js“. This will be the file where you will write your button component.

Structure of the component

In the Button.js file, start by importing React and defining the button component as a functional component.

import React from 'react';

const Button = ({ label, style, onClick, className, id }) => {
  return (
    <button style={style} className={className} id={id} onClick={onClick}>
      { label }
    </button>
  );
};

export default Button;

In the code above, I am using a functional component that takes few props – label, style, onClick, className, id, which will be used for different purposes on the button. The component returns a button element with the props inside it.

Props are arguments you pass to a component to customize its behavior and appearance. This allows you to use the same component for different purposes.

In the above button component, the prop label is used to display text on the button.

The style prop is used to specify the inline style for the button.

The onClick prop will handle the event that is fired when the button is clicked.

The className prop is used to specify the class attribute for the button.

The id prop is used to mention the id attribute for the button.

Usage of the reusable button component

Now that you have the button component, you can use it in other parts of your React app. To do this, you need to import the button component and use it like any other React component.

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

class App extends React.Component {
	
	handleClick() {
		console.log('Click button was clicked!');
	}
	
	handleSave() {
		console.log('Save button was clicked!');
	}
	
	render() {
		return (
			<div>
			  <Button onClick={this.handleClick} style={{ backgroundColor: 'blue', color: 'white' }} className="click" label="Click">
			  </Button>
			  <br/>
			  <Button onClick={this.handleSave} style={{ backgroundColor: 'green', color: 'white' }} id="save" label="Save">
			  </Button>
			</div>
		);
	}
	
}

export default App;

In the code above, I have imported the button component and used it in the App component. I have created two buttons – one with Click and another with Save texts.

I have passed a value Click for the label prop. I passed an onClick prop with a function handleClick that will be called when the Click button is clicked. I also passed a style prop to change the background color and text color of the Click button. I have also specified the className for the Click button.

I have passed a value Save for the label prop in another button. I passed an onClick prop with a function handleSave that will be called when the Save button is clicked. I also passed a style prop to change the background color and text color of the Save button. I have specified the id attribute for the Save button.

Testing button component

Start your application by executing the command npm start on project’s root directory in command prompt and your application will open in the browser at http://localhost:3000.

When you click on the button you will see the log in the browser’s console:

Source Code

Download