storybook/docs/snippets/vue/button-implementation.vue.mdx

```html
<!-- Button.vue -->

<template>
  <!--- the component markup implementation -->
</template>

<script>
export default {
  name: "button",
  props: {
    /**
     * Button contents
     */
    label: {
      type: String,
      required: true
    },
    /**
     * Is this the principal call to action on the page?
     */
    primary: {
      type: Boolean,
      default: false
    },
    /**
     * How large should the button be?
     */
    size: {
      type: String,
      default: "medium",
      validator: function(value) {
        return ["small", "medium", "large"].indexOf(value) !== -1;
      }
    },
    /**
     * What background color to use
     */
    backgroundColor: {
      type: String
    }
  },
  methods: {
    /**
     * Optional click handler
     */
    onClick() {
      this.$emit("onClick");
    }
  }
};
</script>
```