1ab93192eSDerick Montague# Buttons 2ab93192eSDerick Montague 349287562SDerick MontagueButtons are used to perform an action. The main buttons in the application are 449287562SDerick Montaguethe `primary` and `secondary` buttons. Buttons, like all Boostrap-vue components 549287562SDerick Montaguecan be themed by setting the `variant` prop on the component to one of the 649287562SDerick Montague[theme-color map keys](/guide/guidelines/colors). To create a button that looks 749287562SDerick Montaguelike a link, set the variant value to `link`. 8ab93192eSDerick Montague 9*7385e139SPatrick Williams[Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button) 10ab93192eSDerick Montague 11a9de9148SSurenNeware### Icon only buttons 12*7385e139SPatrick Williams 1349287562SDerick MontagueAdd `btn-icon-only` class to the button and add `title` attribute to get helper 1449287562SDerick Montaguetext on hover over the button. 15a9de9148SSurenNeware 16ab93192eSDerick Montague### Enabled buttons 17ab93192eSDerick Montague 18ab93192eSDerick Montague 19ab93192eSDerick Montague 20ab93192eSDerick Montague```vue 21ab93192eSDerick Montague// Enabled Buttons 22ab93192eSDerick Montague<b-button variant="primary">Primary</b-button> 23ab93192eSDerick Montague<b-button variant="primary"> 24ab93192eSDerick Montague <icon-add /> 25ab93192eSDerick Montague <span>Primary with icon</span> 26ab93192eSDerick Montague</b-button> 27ab93192eSDerick Montague<b-button variant="secondary">Secondary</b-button> 28ab93192eSDerick Montague<b-button variant="danger">Danger</b-button> 29ab93192eSDerick Montague<b-button variant="link">Link Button</b-button> 30ab93192eSDerick Montague<b-button variant="link"> 31ab93192eSDerick Montague <icon-add /> 32ab93192eSDerick Montague <span>Link Button</span> 33ab93192eSDerick Montague</b-button> 34a9de9148SSurenNeware<b-button variant="link" title="Delete" class="btn-icon-only"> 35a9de9148SSurenNeware <icon-trashcan /> 36a9de9148SSurenNeware</b-button> 37a9de9148SSurenNeware``` 38a9de9148SSurenNeware 39a9de9148SSurenNeware### Disabled buttons 40a9de9148SSurenNeware 41a9de9148SSurenNeware 42a9de9148SSurenNeware 43a9de9148SSurenNeware```vue 44a9de9148SSurenNeware// Disabled Buttons 45a9de9148SSurenNeware<b-button disabled variant="primary">Primary</b-button> 46a9de9148SSurenNeware<b-button disabled variant="primary"> 47a9de9148SSurenNeware <icon-add /> 48a9de9148SSurenNeware <span>Primary with icon</span> 49a9de9148SSurenNeware</b-button> 50a9de9148SSurenNeware<b-button disabled variant="secondary">Secondary</b-button> 51a9de9148SSurenNeware<b-button disabled variant="danger">Danger</b-button> 52a9de9148SSurenNeware<b-button disabled variant="link">Link Button</b-button> 53a9de9148SSurenNeware<b-button disabled variant="link"> 54a9de9148SSurenNeware <icon-add /> 55a9de9148SSurenNeware <span>Link Button</span> 56a9de9148SSurenNeware</b-button> 57a9de9148SSurenNeware<b-button disabled variant="link" title="Delete" class="btn-icon-only"> 58a9de9148SSurenNeware <icon-trashcan /> 59a9de9148SSurenNeware</b-button> 60ab93192eSDerick Montague``` 61
