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'
options	Array of options<br/>@see https://vue-select.org/api/props.html#options	Array<string | number | { [key: string | number]: any }>	-	[]
onClick	Gets called when the user clicks on the button<br/>@ignore true	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 (opens new window) 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

<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