Light

🀩 Build Custom Button Component With React JS

1.Buttons.jpg

This is the first part of many πŸ›ŽοΈ from the series Custom UI Components With React. In this post we will see how we can create custom Button component with different props and styles in React JS.

Below is the demo of what we are going to build in this tutorial.

btn-demo.jpg

βœ”οΈ Button Component Props

We are going to have several props for this component so that we can have control on it from outside to how we can customize or modify it.The props will be as follows -

  • btnColor - This props will decide the color of the button.
  • labelColor - This props will decide the color of text inside the button. By default it will be white, but depending on your btnColor you can change it to have right contrast.
  • onClick - This will be a onClick handler present on button.
  • type - This prop will decide the styling of the button. It will have the value either one of outline | block | rounded. If this prop is not passed button will have default styling.
  • style - This prop will have any custom styling you want to give Button component from outside.
  • disabled - This prop will decide if the button is in active state or not.

πŸƒBasic Styling Of Button

We will give button some basic styling. Here we will create button.module.css file and then we will add btn class to it for giving some basic styles to our button as follows.

Copied To Clipboard !
1
2/* button.module.css */
3
4.btn {
5	font-family: 'Ubuntu', sans-serif;
6	position: relative;
7	font-weight: 400;
8	font-size: 1.3rem;
9	line-height: 2;
10	height: 50px;
11	transition: all 200ms linear;
12	border-radius: 4px;
13	width: 240px;
14	letter-spacing: 1px;
15	display: inline-flex;
16	align-items: center;
17	justify-content: center;
18	text-align: center;
19	align-self: center;
20	border: none;
21	cursor: pointer;
22	box-shadow: 0 12px 35px 0 rgba(16, 39, 112, .25);
23	outline: 0;
24	text-transform: capitalize;
25}

πŸ’  Creating Button Functional Component

Now we will create a Button.js files in which we will create out custom Button Component. In this file we will import styles from our button.module.css file . Here we will return a basic HTML button element and we will add btn class to it from styles.We will destructure the all props.

Copied To Clipboard !
1//Button.js
2
3import React from 'react';
4import styles from './button.module.css';
5
6const Button = ({ children, onClick, btnColor = 'teal', labelColor, disabled, type, style, ...props }) => {
7	return (
8		<button
9			className={styles.btn}
10		>
11			{children || 'label'}
12		</button>
13	);
14};
15
16export default Button;
17

Now in this Button.js file we will create some styles objects for different types of buttons.

Copied To Clipboard !
1
2//Button.js
3
4	const commonStyles = {
5		backgroundColor : btnColor,
6		color           : labelColor || 'white'
7	};
8	const outlineStyles = {
9		border          : `1px solid ${btnColor}`,
10		color           : btnColor,
11		backgroundColor : 'white'
12	};
13	const outlineHoverStyle = {
14		color           : labelColor || 'white',
15		backgroundColor : btnColor
16	};
17
18	const roundedStyle = {
19		backgroundColor : btnColor,
20		color           : labelColor || 'white',
21		borderRadius    : '25px'
22	};
23	const disabledStyle = {
24		cursor          : 'default',
25		backgroundColor : btnColor,
26		color           : labelColor || 'white',
27		opacity         : 0.4
28	};
29	const blockStyles = {
30		width  : '95%',
31		margin : '0 auto'
32	};

Here we have common styles depending on btnColor which will be added to every type of button . On the other hand all the other styles will be added conditionally depending on the type of button. Here note that for outline type we have two cases - first is default outlineStyles which will be added when type of button is outline and the other case is when we hover over the button.

So to track the hover state we will create state hover with useState() react hook with which we will add hover style conditionally. With Javascript Event Handlers onMouseEnter and onMouseLeave we will toggle our hover state.

Now we will add a simple switch statement in javascript to conditionally render the styles depending on the type of button.

Copied To Clipboard !
1
2//Button.js
3	let btnStyle;
4	switch (type) {
5		case 'rounded':
6			btnStyle = roundedStyle;
7			break;
8		case 'block':
9			btnStyle = blockStyles;
10			break;
11		case 'outline':
12			if (hover) {
13				btnStyle = outlineHoverStyle;
14			}
15			else {
16				btnStyle = outlineStyles;
17			}
18			break;
19		default:
20			btnStyle = {
21				backgroundColor : btnColor,
22				color           : labelColor || 'white'
23			};
24			break;
25	}
26
27

And that's it , Now we will just add this btnStyle along with any style passed from props onto button and we will also add disabled style if button has disabled prop. So our final code will look like follows -

Copied To Clipboard !
1
2//Button.js
3
4import React, { useState } from 'react';
5import styles from './button.module.css';
6
7const Button = ({ children, onClick, btnColor = 'teal', labelColor, disabled, type, style, ...props }) => {
8	const [
9		hover,
10		setHover
11	] = useState(false);
12	const toggleHover = () => {
13		setHover(!hover);
14	};
15	const commonStyles = {
16		backgroundColor : btnColor,
17		color           : labelColor || 'white'
18	};
19	const outlineStyles = {
20		border          : `1px solid ${btnColor}`,
21		color           : btnColor,
22		backgroundColor : 'white'
23	};
24	const outlineHoverStyle = {
25		color           : labelColor || 'white',
26		backgroundColor : btnColor
27	};
28
29	const roundedStyle = {
30		backgroundColor : btnColor,
31		color           : labelColor || 'white',
32		borderRadius    : '25px'
33	};
34	const disabledStyle = {
35		cursor          : 'default',
36		backgroundColor : btnColor,
37		color           : labelColor || 'white',
38		opacity         : 0.4
39	};
40	const blockStyles = {
41		width  : '95%',
42		margin : '0 auto'
43	};
44	let btnStyle;
45	switch (type) {
46		case 'rounded':
47			btnStyle = roundedStyle;
48			break;
49		case 'block':
50			btnStyle = blockStyles;
51			break;
52		case 'outline':
53			if (hover) {
54				btnStyle = outlineHoverStyle;
55			}
56			else {
57				btnStyle = outlineStyles;
58			}
59			break;
60		default:
61			btnStyle = {
62				backgroundColor : btnColor,
63				color           : labelColor || 'white'
64			};
65			break;
66	}
67	return (
68		<button
69			style={
70
71					disabled ? { ...commonStyles, ...btnStyle, ...disabledStyle, ...style } :
72					{ ...commonStyles, ...btnStyle, ...style }
73			}
74			onMouseEnter={toggleHover}
75			onMouseLeave={toggleHover}
76			{...props}
77			type="button"
78			onClick={
79
80					!disabled ? onClick :
81					() => {}
82			}
83			className={styles.btn}
84		>
85			{children || 'button'}
86		</button>
87	);
88};
89
90export default Button;
91

Here you can see live demo and interact with this component. Hope you inderstand this tutorial . Thank You for reading πŸ˜‡.