Component name: <v-button>
Examples
<div class="app">
<v-button class="mr-3 mb-3">Primary button</v-button>
<v-button inverted>Primary button (inverted)</v-button>
</div>
1
2
3
4
<div class="app">
<v-button class="mr-3 mb-3" secondary>Secondary button</v-button>
<v-button secondary inverted>Secondary button (inverted)</v-button>
</div>
1
2
3
4
Change sizes
<div class="app">
<v-button class="mr-3 mb-3" small>Small</v-button>
<v-button class="mr-3 mb-3" medium>Medium</v-button>
<v-button class="mr-3 mb-3" large>large</v-button>
<v-button class="mr-3 mb-3" small secondary>Small</v-button>
<v-button class="mr-3 mb-3" medium secondary>Medium</v-button>
<v-button large secondary>large</v-button>
</div>
1
2
3
4
5
6
7
8
Change underlying element
<div class="app">
<v-button class="mr-3 mb-3" tag="button">I'm a button</v-button>
<v-button tag="a" class="ml-3">I'm a link</v-button>
</div>
1
2
3
4
API
| Name | Type | Description | Default |
|---|
| tag | String | Change the underlying DOM element | a |
| primary | Boolean | Primary variant | true |
| secondary | Boolean | Primary variant | false |
| small | Boolean | Small size | false |
| medium | Boolean | Medium size | true |
| large | Boolean | Large size | false |
Notice
All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class attribute.