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.
73 lines
1.7 KiB
JavaScript
73 lines
1.7 KiB
JavaScript
import React from 'react'
|
|
import VisuallyHidden from '@reach/visually-hidden'
|
|
|
|
import { COLORS } from '../lib/constants'
|
|
|
|
const Button = ({
|
|
id,
|
|
'data-cy': cypressElementId,
|
|
onClick = () => {},
|
|
className = '',
|
|
background = COLORS.BLACK,
|
|
color = COLORS.SECONDARY,
|
|
hoverBackground = COLORS.HOVER,
|
|
hoverColor,
|
|
disabled,
|
|
selected,
|
|
children,
|
|
border,
|
|
center,
|
|
large,
|
|
style = {},
|
|
flex = 1,
|
|
padding = 0,
|
|
margin = 0,
|
|
title
|
|
}) => (
|
|
<button
|
|
id={id}
|
|
onClick={onClick}
|
|
className={className}
|
|
disabled={disabled}
|
|
style={style}
|
|
data-cy={cypressElementId}
|
|
>
|
|
{title && <VisuallyHidden>{title}</VisuallyHidden>}
|
|
{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: ${disabled ? '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,
|
|
button:focus {
|
|
background-color: ${hoverBackground} !important;
|
|
color: ${hoverColor || color};
|
|
}
|
|
|
|
button:focus {
|
|
box-shadow: ${border ? `inset 0px 0px 0px 2px ${color}` : 'initial'};
|
|
}
|
|
`}
|
|
</style>
|
|
</button>
|
|
)
|
|
|
|
export default Button
|