How to Build Custom Component Button in React

How to Build Custom Component Button in React

Hello React 👋,

React is a popular JavaScript library used for building UI components. Components are the building blocks of React apps and a single app usually consists of multiple reusable components. React splits the UI into independent, reusable parts that can be customized also.

When building a fairly large app that has the same structure of button, we may want to build a button component that can be used throughout the app, instead of creating a new button every single time.

In this article, we will create a custom Button component with different props and styles which can be used anywhere in your app.

Let's Get Started

First we are going to create our components directory and in it customButton directory. inside the customButton directory, we will create two files, Button.js and colors.js.

We start with the colors.js file, here we list out the colors our button will have throughout the app, you can add as much as you want.

export default {
  main: "#31f794",
  primary: "#4287f5",
  secondary: "#e835b5",
  danger: "#FF4C4F",
  grey: "#a4a5a6",
};

You can also use rgba system.

Next, Navigate to the Button.js component, import the colors and create a simple functional component, pass props as the paramenter and export the component.

import colors from "./colors";

const Button = (props) => {}

export default Button;

Now in the Button.js file, we are going to target the colors file, specifying what will happen when we choose a color key.

  const getBgColor = () => {
    if (props.main) {
      return colors.main;
    }
    if (props.primary) {
      return colors.primary;
    }
    if (props.disabled) {
      return colors.grey;
    }
    if (props.danger) {
      return colors.danger;
    }
    if (props.bg) {
      return props.bg;
    }
  };

Notice that the last if statement returns just props.bg, this means that you can put in a background color that is not specified in the colors.js file.

Next step is to define the styles, which can also be customized through props.

  const styles = {
    backgroundColor: getBgColor(),
    height: props.height,
    borderRadius: props.br,
    width: props.width,
    margin: props.margin,
    marginTop: props.mt,
    marginBottom: props.mb,
    padding: props.pd,
    color: props.color,
    border: props.br ? "1px solid " + props.brColor : "0px solid " + props.bg,
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-evenly",
    alignItems: "center",
    cursor: "pointer",
    fontSize: props.fontSize,
  };

Note that you can add styles to your preference and the backgroundColor is referencing to the color function we created earlier. So if you choose main , disabled, etc, the background colors get added accordingly.

Also, some of the styles has a props... value, this also means we can add those values in the components we use the buttons.

Now we have to return a button element, for all this to work.

  return (
    <button style={styles} onClick={props.onclick}>
      {props.title}
    </button>
  );

And that's all, we just have to pass the styles we created into the button, an onClick function and props.title for modifiable button text. Our final code will look like this;

import colors from "./colors";

const Button = (props) => {
  const getBgColor = () => {
    if (props.main) {
      return colors.main;
    }
    if (props.primary) {
      return colors.primary;
    }
    if (props.disabled) {
      return colors.grey;
    }
    if (props.danger) {
      return colors.danger;
    }
    if (props.bg) {
      return props.bg;
    }
  };

  const styles = {
    backgroundColor: getBgColor(),
    height: props.height,
    borderRadius: props.br,
    width: props.width,
    margin: props.margin,
    marginTop: props.mt,
    marginBottom: props.mb,
    padding: props.pd,
    color: props.color,
    border: props.br ? "1px solid " + props.brColor : "0px solid " + props.bg,
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-evenly",
    alignItems: "center",
    cursor: "pointer",
    fontSize: props.fontSize,
  };

  const dis = {
    cursor: "not-allowed",
  };

  return (
    <button style={styles} onClick={props.onclick}>
      {props.title}
    </button>
  );
};

export default Button;

Now, we can use our button component anywhere in our app, you can create a simple page to test if it works, you can play around with the values.

import React from "react";
import Button from "../components/button";

const BtnTest = () => {
  return (
    <div>
      <Button
        height={35}
        title="SUBMIT BUTTON"
        color="#fff"
        mt={10}
        mb={10}
        br={8}
        pd={20}
        main
        color="#000000"
        width={200}
      />
    </div>
  );
};

export default BtnTest;

Thank you for reading 😊.

 
Share this