-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbutton.js
84 lines (78 loc) · 2.07 KB
/
button.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
/**
* Button
* @param {string} color
* @param {string} label
* @param {string} variant
* @param {string} icon
* @param {bool} disabled
* @param {bool} loading
* @param {className} className
* @param {bool} fullWidth
*/
const Button = ({
color,
label,
variant,
icon,
size,
disabled,
loading,
className,
fullWidth,
...restProps
}) => {
const isDisabled = disabled || loading;
const colorWhite = color == "white" ? color : color + "-500";
const btnSizes = {
large: "text-sm py-5",
medium: "text-sm py-3",
small: "text-xs py-3"
};
const btnVariants = {
text: "font-bold text-sm outline-none focus:outline-none",
link: "font-bold text-sm outline-none focus:outline-none",
contained: `text-white bg-${color}-500 hover:bg-${color}-600 font-bold text-sm px-6 py-3 hover:shadow-md outline-none focus:outline-none`,
outlined: `bg-transparent text-${colorWhite} font-bold text-sm px-6 py-3 border-${colorWhite} hover:border-${colorWhite} border-2 hover:shadow-md outline-none focus:outline-none`
};
return (
<button
type={"button"}
className={classNames(
btnVariants[variant],
btnSizes[size],
{
"opacity-50 cursor-not-allowed": isDisabled
},
`${
fullWidth ? "w-full" : "w-auto"
} rounded-md transition ease-in-out duration-150 ${className}`
)}
{...restProps}>
{icon && <span className="mr-2">{icon}</span>}
{label}
</button>
);
};
Button.propTypes = {
variant: PropTypes.oneOf(["contained", "outlined", "text", "link"]),
size: PropTypes.oneOf(["small", "medium", "large"]),
label: PropTypes.string,
color: PropTypes.string,
icon: PropTypes.node,
loading: PropTypes.bool,
disabled: PropTypes.bool,
className: PropTypes.string,
fullWidth: PropTypes.bool
};
Button.defaultProps = {
variant: "contained",
color: "mint",
loading: false,
disabled: false,
size: "medium",
fullWidth: false
};
export default Button;