index.js

// Demo for using styled-system variants for button styles
// and mapping props for size
import React from 'react'
import styled from 'styled-components'
import {
  color,
  space,
  fontSize,
  buttonStyle,
} from 'styled-system'

export const colors = {
  blue: '#0067ee',
  green: '#00cc10',
  red: '#ee1000'
}

export const theme = {
  colors,
  buttons: {
    primary: {
      color: 'white',
      backgroundColor: colors.blue
    },
    outline: {
      color: colors.blue,
      backgroundColor: 'transparent',
      borderColor: colors.blue
    },
    secondary: {
      color: 'white',
      backgroundColor: colors.green
    },
    error: {
      color: 'white',
      backgroundColor: colors.red
    }
  },
}

const buttonSizes = {
  small: {
    px: 2,
    py: 1,
  },
  medium: {
    px: 3,
    py: 2,
  },
  large: {
    px: 4,
    py: 3
  }
}

const withSize = Component => ({
  size,
  ...props
}) =>
  <Component
    {...props}
    {...(buttonSizes[size])}
  />

export const Button = withSize(styled.button([], {
  fontFamily: 'inherit',
  fontWeight: 'bold',
  lineHeight: 16/14,
  WebkitFontSmoothing: 'antialiased',
  display: 'inline-block',
  verticalAlign: 'middle',
  textAlign: 'center',
  textDecoration: 'none',
  appearance: 'none',
  borderWidth: '2px',
  borderStyle: 'solid',
  borderColor: 'transparent',
  borderRadius: '4px',
  '&:disabled': {
    opacity: 1/4
  },
},
  buttonStyle,
  color,
  space,
  fontSize
))
Button.displayName = 'Button'
Button.defaultProps = {
  variant: 'primary',
  m: 0,
  px: 3,
  py: 2,
  fontSize: 1
}