blob: ca78201b313d728e14408049134946c8042adedf (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
# Buttons
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`.
[Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button)
### Enabled buttons
![Button examples](./button.png)
### Disabled buttons
![Disabled button examples](./button-disabled.png)
```vue
// Enabled Buttons
<b-button variant="primary">Primary</b-button>
<b-button variant="primary">
<icon-add />
<span>Primary with icon</span>
</b-button>
<b-button variant="link">
<icon-trashcan />
<span class="sr-only">Delete</span>
</b-button>
<b-button variant="secondary">Secondary</b-button>
<b-button variant="danger">Danger</b-button>
<b-button variant="link">Link Button</b-button>
<b-button variant="link">
<icon-add />
<span>Link Button</span>
</b-button>
```
|