const Button = styled.div` color: #ffffff; padding: 8px; gap: 4px; ${({ color }) => color ? `background-color: ${color};` : 'background-color: #1e1f28;'} :hover { ${({ hoverColor }) => hoverColor ? `background-color: ${hoverColor};` : 'background-color: #25252A;'} } font-family: Helvetica Neue; font-size: 14px; font-style: normal; font-weight: normal; line-height: 150%; border-radius: 4px; ${({ width }) => (width ? `width: ${width};` : 'width: fit-content;')} cursor: pointer; justify-content: center; align-items: center; display: flex; font-size: 0.875rem; line-height: 1.25rem; `; const Icon = styled.i` color: #777583; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; `; return ( <Button onClick={props.onClick} color={props.color} hoverColor={props.hoverColor} width={props.width} > {props.icon && <Icon className={props.icon}></Icon>} {props.text} </Button> );