bootstrap-vue/src/components/button/fixtures/button.html

BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.

<div id="app">
    <div class="row">
        <template v-for="variant in variants">
            <div class="col-md-4 pb-2"
                 v-for="size in sizes">
                <b-button :size="size"
                          :variant="variant"
                          :ref="`btn${size ? `_${size}` : ''}_${variant.replace(/-/g, '_')}`">
                    {{variant}} {{size}}
                </b-button>
            </div>
        </template>
        <div class="col-md-4 pb-2">
            <!-- shorthand element name also available -->
            <b-btn variant="secondary"
                   href="https://github.com/bootstrap-vue/bootstrap-vue"
                   target="_blank"
                   ref="btn_href">
                Link button!
                <img class="align-bottom ml-1"
                     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMTIgMTIgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMTIgMTIgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiAxMy40Yy0xMC41IDAtMTkgOC41LTE5IDE5YzAgOC40IDUuNSAxNS41IDEzIDE4YzEgMC4yIDEuMy0wLjQgMS4zLTAuOWMwLTAuNSAwLTEuNyAwLTMuMiBjLTUuMyAxLjEtNi40LTIuNi02LjQtMi42QzIwIDQxLjYgMTguOCA0MSAxOC44IDQxYy0xLjctMS4yIDAuMS0xLjEgMC4xLTEuMWMxLjkgMC4xIDIuOSAyIDIuOSAyYzEuNyAyLjkgNC41IDIuMSA1LjUgMS42IGMwLjItMS4yIDAuNy0yLjEgMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEgMC43LTMuNyAyLTUuMWMtMC4yLTAuNS0wLjgtMi40IDAuMi01YzAgMCAxLjYtMC41IDUuMiAyIGMxLjUtMC40IDMuMS0wLjcgNC44LTAuN2MxLjYgMCAzLjMgMC4yIDQuNyAwLjdjMy42LTIuNCA1LjItMiA1LjItMmMxIDIuNiAwLjQgNC42IDAuMiA1YzEuMiAxLjMgMiAzIDIgNS4xYzAgNy4zLTQuNSA4LjktOC43IDkuNCBjMC43IDAuNiAxLjMgMS43IDEuMyAzLjVjMCAyLjYgMCA0LjYgMCA1LjJjMCAwLjUgMC40IDEuMSAxLjMgMC45YzcuNS0yLjYgMTMtOS43IDEzLTE4LjFDNTEgMjEuOSA0Mi41IDEzLjQgMzIgMTMuNHoiLz48L3N2Zz4="

                     height="20"
                     alt="github">
            </b-btn>
        </div>
        <div class="col-md-4 pb-2">
            <b-btn variant="success"
                   ref="btn_click"
                   @click="handleClick">
                Click me!
            </b-btn>
        </div>
        <div class="col-md-4 pb-2">
            <b-btn variant="primary"
                   ref="btn_block_disabled"
                   block
                   disabled>
                Can't touch this
            </b-btn>
        </div>
        <div class="col-md-4 pb-2">
            <b-btn variant="primary"
                   ref="btn_pressed"
                   :pressed.sync="btnToggle">
                Toggle Me
            </b-btn>
        </div>
    </div>
</div>