# Button

The only true button.

# Props

Prop name Description Type Values Default
color The color for the button. string - '#333'
size The size of the button string small, normal, large 'normal'
onClick Gets called when the user clicks on the button func - event => {
console.log('You have clicked me!', event.target)
}

# Slots

Name Description Bindings
default Content of button

Use vue live right here too

```jsx live
<Button>I’m transparent!</Button>
```
<Button>I’m transparent!</Button>

To render an example as highlighted source code remove the live modifier

<button>I’m transparent!</button>

edit on github

Basic button:

<Button>Push Me</Button>

Big pink button:

<Button size="large" color="deeppink">
  Click Me
</Button>

And you can use any Markdown here.

Fenced code blocks with vue, js, jsx or javascript languages are rendered as a interactive playgrounds:

<Button>Push Me</Button>

You can also use the Single File Component Format


Next Dog Name: Bella

<template>
  <div class="wrapper">
    <Button @click.native="pushButton">Push Me</Button>
    <hr />
    <p class="text-name">Next Dog Name: {{ dogName }}</p>
  </div>
</template>
<script>
const dogNames = require('dog-names').all

// You can also use 'exports.default = {}' style module exports.
export default {
  data() {
    return { numClicks: 0, dogName: dogNames[0] }
  },
  methods: {
    pushButton() {
      this.numClicks += 1
      this.dogName = dogNames[this.numClicks]
    }
  }
}
</script>
<style scoped>
.wrapper {
  padding: 10px;
}
.text-name {
  color: red;
}
</style>


edit on github

# This is the second readme

one can also load markdown using the @examples doclets