aboutsummaryrefslogtreecommitdiff
path: root/components/Button/index.tsx
blob: 9eb2e9596b55591333335d83bc2a55d8902b4d5e (plain)
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
import React, { TextareaHTMLAttributes } from 'react';
import { getSystemStyle, SystemProps } from '../utils/systemProps';

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
  SystemProps
{ }

const Button: React.FC<ButtonProps> = ({ style, ...props }) => {
  style = {
    margin: '0.25rem 0.125rem',
    cursor: 'pointer',
    padding: '0.375rem 0.75rem',
    borderRadius: '0.25rem',
    textAlign: 'center',
    verticalAlign: 'middle',
    display: 'inline-block',
    userSelect: 'none',

    fontFamily: 'inherit',
    fontSize: '.95rem',
    lineHeight: '1.15',

    // Color
    color: '#fff',
    backgroundColor: '#1473ff',
    border: '1px solid #1473ff',
    boxSizing: 'border-box',

    transition: 'color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out',
    ...style,
  };

  const systemStyle = getSystemStyle(props, style);

  return (<button style={systemStyle} {...props} />);
};

export default Button;