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