components/buttons/index.md

4 the `primary` and `secondary` buttons. Buttons, like all Boostrap-vue components
6 [theme-color map keys](/guide/guidelines/colors). To create a button that looks
9 [Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button)
13 Add `btn-icon-only` class to the button and add `title` attribute to get helper
14 text on hover over the button.
18 ![Button examples](./button.png)
22 <b-button variant="primary">Primary</b-button>
23 <b-button variant="primary">
24   <icon-add />
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>
41 ![Disabled button examples](./button-disabled.png)
45 <b-button disabled variant="primary">Primary</b-button>
46 <b-button disabled variant="primary">
47   <icon-add />
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>