<style>
.demo button{
	margin:10px;
}

</style>

<template>
<div class="demo" >
	<Button  
	text="btn" 
	></Button>
	<Button  
	class="btn-primary"
	text="btn-primary" 
	></Button>
	<Button  
	class="btn-stress"
	text="btn-stress" 
	></Button>
	<Button  
	class="btn-outline"
	text="btn-outline" 
	></Button>
	
	<Button  
	class="btn-primary disabled"
	text="disabled" 
	disabled="disabled"
	></Button>
	<br>
	<Button  
	class="btn btn-s"
	text="btn btn-s" 
	></Button>

	<Button  
	class="btn btn-m"
	text="btn btn-m" 
	></Button>
</div>
<br>
<div>
	<Button  
	class="btn-primary btn-block"
	text="full-width" 
	></Button>
</div>
</template>

<script>
import Button from "components/button/"

export default{
	data(){
		return{
			isLoading: false
		}
	},
	components: {
		Button
	},
	methods:{
		showLoading: function(){
			this.isLoading==true?this.isLoading=false:this.isLoading=true;
		}
	}
}
</script>