Skip to content

Instantly share code, notes, and snippets.

@geelen geelen/button.js
Last active Feb 10, 2017

Embed
What would you like to do?
import React, { PropTypes } from 'react'
import styled, { css } from 'styled-components'
const commonClasses = 'link dib f5 fw6 tracked tc br2 ttu ba pointer'
const sizes = ['large', 'small', 'extra-large']
const types = ['success', 'warning', 'danger', 'primary', 'default']
const sizedBtnClasses = {
'large': 'h3 pa3',
'small': 'h2 lh-solid pa3',
'extra-large': 'lh-solid ph4 pv4'
}
const solidBtnClasses = {
success: 'b--transparent bg-green dark-navy hover-bg-dark-green',
warning: 'b--transparent bg-yellow dark-navy hover-bg-orange hover-white',
danger: 'b--red bg-red white hover-b--dark-red hover-bg-dark-red',
primary: 'b--transparent bg-blue white hover-bg-dark-blue',
default: 'b--white bg-white dark-navy hover-bg-light-gray'
}
const outlineBtnClasses = {
success: 'b--green green hover-dark-navy hover-bg-green',
warning: 'b--yellow yellow hover-dark-navy hover-bg-yellow',
danger: 'b--red red hover-dark-navy hover-bg-red',
primary: 'b--blue blue white hover-bg-dark-blue',
default: 'b--white white hover-dark-navy hover-bg-white'
}
const Button = styled.a.attrs({
className: ({type='default', size='large', outline=false}) => [
'link dib f5 fw6 tracked tc br2 ttu ba pointer',
outline ? outlineBtnClasses[type] : solidBtnClasses[type],
sizedBtnClasses[size]
].join(' ')
})`
${props => ({
small: css`
min-width: 140px;
height: 3rem;
`,
large: css`
min-width: 200px;
line-height: 2rem;
`,
'extra-large': css`
min-width: 280px;
height: 5rem;
`
})[props.size || 'large']
`
Button.propTypes = {
href: PropTypes.string,
type: PropTypes.oneOf(types),
size: PropTypes.oneOf(sizes),
outline: PropTypes.bool,
children: PropTypes.string.isRequired
}
export default Button
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.