1# Buttons 2 3Buttons are used to perform an action. The main buttons in the application are the `primary` and `secondary` buttons. Buttons, like all Boostrap-vue components can be themed by setting the `variant` prop on the component to one of the [theme-color map keys](/guide/guidelines/colors). To create a button that looks like a link, set the variant value to `link`. 4 5[Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button) 6 7### Icon only buttons 8Add `btn-icon-only` class to the button and add `title` attribute to get helper text on hover over the button. 9 10### Enabled buttons 11 12 13 14```vue 15// Enabled Buttons 16<b-button variant="primary">Primary</b-button> 17<b-button variant="primary"> 18 <icon-add /> 19 <span>Primary with icon</span> 20</b-button> 21<b-button variant="secondary">Secondary</b-button> 22<b-button variant="danger">Danger</b-button> 23<b-button variant="link">Link Button</b-button> 24<b-button variant="link"> 25 <icon-add /> 26 <span>Link Button</span> 27</b-button> 28<b-button variant="link" title="Delete" class="btn-icon-only"> 29 <icon-trashcan /> 30</b-button> 31``` 32 33### Disabled buttons 34 35 36 37```vue 38// Disabled Buttons 39<b-button disabled variant="primary">Primary</b-button> 40<b-button disabled variant="primary"> 41 <icon-add /> 42 <span>Primary with icon</span> 43</b-button> 44<b-button disabled variant="secondary">Secondary</b-button> 45<b-button disabled variant="danger">Danger</b-button> 46<b-button disabled variant="link">Link Button</b-button> 47<b-button disabled variant="link"> 48 <icon-add /> 49 <span>Link Button</span> 50</b-button> 51<b-button disabled variant="link" title="Delete" class="btn-icon-only"> 52 <icon-trashcan /> 53</b-button> 54```
