Vue Functional Component

Button.vue

<script>
import { propsToClasses } from './../utils'

export default {
  functional: true,

  props: {
    destructive: Boolean,
    external: Boolean,
    fullwidth: Boolean,
    plain: Boolean,
    primary: Boolean,
    size: String,
    url: String
  },

  render (h, { data, props, children }) {
    // Set base class.
    const baseClass = 'c-button'
    // Get classes.
    let classes = propsToClasses(baseClass, props)
    // Set HTML element.
    const element = props.url ? 'a' : 'button'

    // Set empty attributes.
    data.attrs = {}
    // Add href if needed.
    data.attrs.href = props.url ? props.url : false

    // Add `size` class if needed.
    classes +=
      props.size && (props.size === 'large' || props.size === 'small')
      ? ` ${baseClass}--${props.size}`
      : ''

    // Set classes
    data.class = classes

    // Add click handler.
    data.on = {
      click: function (event) {
        if (event.target !== event.currentTarget) return

        event.target.blur()
      }
    }

    // Render element.
    return h(element, {
      ...data
    }, children)
  }
}
</script>

utils-index.js

// Used to change camelCase props to kebab-case classes
import decamelize from 'decamelize'

export function propsToClasses (base, props) {
  return Object.keys(props).reduce((classes, key) => {
    if (props[key] && typeof props[key] === 'boolean') {
      classes += ` ${base}--${decamelize(key, '-')}`
    }

    return classes
  }, base)
}