xref: /openbmc/webui-vue/docs/guide/components/buttons/index.md (revision e7eb9dc6c2c1e5969e0bddc23521cd3e11eacb22) 
1 # Buttons
2 
3 Buttons 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 ```