Component based styling rather than css writing with Tachyons

danger-button.js

import React from 'react'

export default ({ props, className }) => {
  const border = 'ba br3 outline-0'
  const spacing = 'ph4 pv3'
  const color = 'white hover-near-white bg-red hover-bg-dark-red b--dark-red'

  return (
    <a
      className={`input-reset grow pointer ${border} ${spacing} ${color} ${className}`}
      {...props}
    />
  )
}

primary-button.js

import React from 'react'

export default ({ props, className }) => {
  const border = 'ba br3 outline-0'
  const spacing = 'ph4 pv3'
  const color = 'white hover-near-white bg-blue hover-bg-dark-blue b--dark-blue'

  return (
    <a
      className={`input-reset grow pointer ${border} ${spacing} ${color} ${className}`}
      {...props}
    />
  )
}

using-buttons.js

import React from 'react'

import PrimaryButton from './primary-button'
import DangerButton from './danger-button'

export default () => (
  <div>
    <h1>Hello, world!</h1>
    <PrimaryButton>
      Yessss!
    </PrimaryButton>
    <DangerButton>
      NOOOOO
    </DangerButton>
  </div>
)