mirror of https://github.com/sgoudham/carbon.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
|
|
import { COLORS } from '../lib/constants'
|
|
|
|
const Button = ({
|
|
onClick = () => {},
|
|
className = '',
|
|
background = COLORS.BLACK,
|
|
color = COLORS.SECONDARY,
|
|
hoverBackground = COLORS.HOVER,
|
|
hoverColor,
|
|
disabled,
|
|
notAllowed,
|
|
selected,
|
|
title,
|
|
children,
|
|
border,
|
|
center,
|
|
large,
|
|
style = {},
|
|
flex = 1,
|
|
padding = 0,
|
|
margin = 0
|
|
}) => (
|
|
<button onClick={onClick} className={className} disabled={disabled || notAllowed} style={style}>
|
|
{title && <span className="button-title">{title}</span>}
|
|
{children}
|
|
<style jsx>
|
|
{`
|
|
button {
|
|
display: flex;
|
|
flex: ${flex};
|
|
background-color: ${background};
|
|
color: ${color};
|
|
box-shadow: ${border ? `inset 0px 0px 0px ${selected ? 2 : 1}px ${color}` : 'initial'};
|
|
cursor: ${notAllowed ? 'not-allowed' : 'pointer'};
|
|
outline: none;
|
|
border: none;
|
|
padding: ${padding};
|
|
margin: ${margin};
|
|
border-radius: ${border ? '3px' : 0};
|
|
user-select: none;
|
|
justify-content: ${center ? 'center' : 'initial'};
|
|
align-items: ${center ? 'center' : 'initial'};
|
|
align-self: stretch;
|
|
font-size: ${large ? '14px' : '12px'};
|
|
}
|
|
|
|
button:hover {
|
|
background-color: ${hoverBackground} !important;
|
|
color: ${hoverColor || color};
|
|
}
|
|
|
|
.button-title {
|
|
font-size: ${large ? '14px' : '12px'};
|
|
}
|
|
`}
|
|
</style>
|
|
</button>
|
|
)
|
|
|
|
export default Button
|