Reusable Button component example in react js

• Create Components folder under src folder
• Create  common folder under Components folder
• Create Button folder under common folder
• Add index.js file under Button folder and add below Code

import React from "react";

import "./style.css";

const Button = props => {

  const btnEnableDisable = !props.isDisabled ? "btn-enable" : "btn-disabled";

  return (

    <button

      id={props.id}

      className={`btn ${btnEnableDisable}`}

      onClick={props.clickHandler}

      type={props.type}

      disabled={props.isDisabled}

    >

      {props.value}

    </button>

  );

};

Button.defaultProps = {

  type: "button",

  disabled: false

};

export default Button;

• Add style.css file and add below Code

.btn.btn-enable {

  display: block;

  width: 150px;

  margin: 0 auto;

  margin-top: 20px;

  border: 1px solid #25729a;

  border-radius: 3px;

  text-align: center;

  color: #ffffff;

  background-color: #3093c7;

  margin-bottom: 20px;

  padding: 7px 7px 7px 7px;

}

.btn.btn-disabled {

  display: block;

  width: 150px;

  margin: 0 auto;

  margin-top: 20px;

  opacity: 0.65;

  cursor: not-allowed;

  border: 1px solid #25729a;

  border-radius: 3px;

  text-align: center;

  color: #ffffff;

  background-color: #3093c7;

  margin-bottom: 20px;

  padding: 7px 7px 7px 7px;

}

.btn:hover {

  border: 1px solid #1c5675;

  background-color: #26759e;

  background-image: -webkit-gradient(

    linear,

    left top,

    left bottom,

    color-stop(0%, #26759e),

    color-stop(100%, #133d5b)

  );

}

• Go to Components Folder and Add ButtonEXP.js file and add below Code

import React from "react";

import Button from "./common/Button/index";

export default function ButtonEXP() {

  const insertClickHandler = e => {

    alert("Clicked on insert Button");

  };

  const saveClickHandler = e => {

    alert("Clicked on save Button");

  };

  return (

    <div>

      <h3>Button reusable component example</h3>

      <Button

        id={"btnInsert"}

        type={"Submit"}

        value={"Insert"}

        isDisabled={true}

        clickHandler={insertClickHandler}

      />

      <Button

        id={"btnSave"}

        type={"Submit"}

        value={"Save"}

        isDisabled={false}

        clickHandler={saveClickHandler}

      />

    </div>

  );

}

• Open App.js file and update code as below

import React from 'react';

import ButtonEXP from './Components/ButtonEXP'

function App() {

  return (

    <div>

      <ButtonEXP/>

    </div>

  );

}

export default App;

Output: