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### Enabled buttons
8
9![Button examples](./button.png)
10
11### Disabled buttons
12
13![Disabled button examples](./button-disabled.png)
14
15
16```vue
17// Enabled Buttons
18<b-button variant="primary">Primary</b-button>
19<b-button variant="primary">
20  <icon-add />
21  <span>Primary with icon</span>
22</b-button>
23<b-button variant="link">
24  <icon-trashcan />
25  <span class="sr-only">Delete</span>
26</b-button>
27
28<b-button variant="secondary">Secondary</b-button>
29<b-button variant="danger">Danger</b-button>
30<b-button variant="link">Link Button</b-button>
31<b-button variant="link">
32  <icon-add />
33  <span>Link Button</span>
34</b-button>
35```