storybook/docs/snippets/vue/button-implementation.2.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>
```