insomnia/packages/insomnia-components/components/button.js

48 lines
1.0 KiB
JavaScript
Raw Normal View History

// @flow
import * as React from 'react';
import styled from 'styled-components';
type Props = {
onClick?: (e: SyntheticEvent<HTMLButtonElement>) => any,
bg?: 'success' | 'notice' | 'warning' | 'danger' | 'surprise' | 'info',
};
const StyledButton: React.ComponentType<Props> = styled.button`
text-align: center;
color: ${({ bg }) => (bg ? `var(--color-${bg})` : 'var(--color-font)')};
font-size: var(--font-size-sm);
padding: 0 var(--padding-md);
height: var(--line-height-xs);
opacity: 0.8;
border-radius: 2px;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
border: ${({ noOutline }) => (noOutline ? '0' : '1px solid')};
&:focus,
&:hover {
outline: 0;
background-color: var(--hl-xxs);
opacity: 1;
}
&:active {
background-color: var(--hl-xs);
}
svg {
display: inline-block !important;
margin-left: 0.4em;
}
`;
class Button extends React.Component<Props> {
render() {
return <StyledButton {...this.props} />;
}
}
export default Button;