Button ​

Overview ​

BootstrapVueNext's BButton component generates either a <button> element, <a> element, or RouterLink component with the styling of a button.

<BButton>Button</BButton>
<BButton variant="danger">Button</BButton>
<BButton variant="success">Button</BButton>
<BButton variant="outline-primary">Button</BButton>

Element type ​

The BButton component generally renders a <button> element. However, you can also render an <a> element by providing an href prop value. You may also generate vue-router RouterLink when providing a value for the to prop (vue-router is required).

<BButton>I am a Button</BButton>
<BButton href="#">I am a Link</BButton>

Type ​

You can specify the button's type by setting the prop type to 'button', 'submit' or 'reset'. The default type is 'button'.

Note the type prop has no effect when either href or to props are set.

Sizing ​

Fancy larger or smaller buttons? Specify lg or sm via the size prop.

<BButton size="sm" class="mx-1">Small Button</BButton>
<BButton class="mx-1">Default Button</BButton>
<BButton size="lg" class="mx-1">Large Button</BButton>

Contextual variants ​

Use the variant prop to generate the various Bootstrap contextual button variants.

By default, BButton will render with the secondary variant.

The variant prop adds the Bootstrap class .btn-<variant> on the rendered button. See the Color Variants page for details.

Solid color variants ​

primary, secondary, success, danger, warning, info, light and dark.

<BButton variant="primary">Primary</BButton>
<BButton variant="secondary">Secondary</BButton>
<BButton variant="success">Success</BButton>
<BButton variant="danger">Danger</BButton>
<BButton variant="warning">Warning</BButton>
<BButton variant="info">Info</BButton>
<BButton variant="light">Light</BButton>
<BButton variant="dark">Dark</BButton>

Outline color variants ​

In need of a button, but not the hefty background colors they bring? Use the outline-* variants to remove all background images and colors on any BButton:

outline-primary, outline-secondary, outline-success, outline-danger, outline-warning, outline-info, outline-light and outline-dark.

<BButton variant="outline-primary">Primary</BButton>
<BButton variant="outline-secondary">Secondary</BButton>
<BButton variant="outline-success">Success</BButton>
<BButton variant="outline-danger">Danger</BButton>
<BButton variant="outline-warning">Warning</BButton>
<BButton variant="outline-info">Info</BButton>
<BButton variant="outline-light">Light</BButton>
<BButton variant="outline-dark">Dark</BButton>

Link variant ​

Variant link will render a button with the appearance of a link while maintaining the default padding and size of a button.

<BButton variant="link">Link</BButton>

Tip: remove the hover underline from a link variant button by setting underline-opacity="0".

Block level buttons ​

Create responsive stacks of full-width, “block buttons” by wrapping the button(s) in a div and specifying d-grid and gap-*. By using CSS utilities instead a boolean property on the button, we have much greater control over spacing, alignment, and responsive behaviors. See the Bootstrap 5 documentation for details

<div class="d-grid gap-2">
  <BButton variant="primary">Block Level Button</BButton>
  <BButton variant="primary">Another Block Level Button</BButton>
</div>

Pill style ​

Prefer buttons with a more rounded-pill style? Just set the prop pill to true.

<BButton pill>Button</BButton>
<BButton pill variant="primary">Button</BButton>
<BButton pill variant="outline-secondary">Button</BButton>
<BButton pill variant="success">Button</BButton>
<BButton pill variant="outline-danger">Button</BButton>
<BButton pill variant="info">Button</BButton>

This prop adds the Bootstrap v5 utility class .rounded-pill on the rendered button.

Squared style ​

Prefer buttons with a more square corner style? Just set the prop squared to true.

<BButton squared>Button</BButton>
<BButton squared variant="primary">Button</BButton>
<BButton squared variant="outline-secondary">Button</BButton>
<BButton squared variant="success">Button</BButton>
<BButton squared variant="outline-danger">Button</BButton>
<BButton squared variant="info">Button</BButton>

The squared prop adds the Bootstrap v5 utility class .rounded-0 on the rendered button. The pill prop takes precedence over the squared prop.

Disabled state ​

Set the disabled prop to disable button default functionality. disabled also works with buttons rendered as <a> elements and RouterLink (i.e. with the href or to prop set).

<BButton disabled size="lg" variant="primary">Disabled</BButton>
<BButton disabled size="lg">Also Disabled</BButton>

Pressed state and toggling ​

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when the prop pressed is set to true.

The pressed prop can be set to one of three values:

• true: Sets the .active class and adds the attribute aria-pressed="true".
• false: Clears the .active class and adds the attribute aria-pressed="false".
• null: (default) Neither the class .active nor the attribute aria-pressed will be set.

To create a button that can be toggled between active and non-active states, use the v-model (available in Vue 3.0+) on the pressed property by specifying v-model:pressed.

<template>
  <h5>Pressed and un-pressed state</h5>
  <div class="d-flex gap-2">
    <BButton :pressed="true" variant="success">Always Pressed</BButton>
    <BButton :pressed="false" variant="success">Not Pressed</BButton>
  </div>
  <h5 class="mt-3">Toggleable Button</h5>
  <BButton v-model:pressed="buttonToggle" variant="primary">Toggle Me</BButton>
  <p>
    Pressed State: <strong>{{ buttonToggle }}</strong>
  </p>
  <h5>In a button group</h5>
  <BButtonGroup size="sm">
    <BButton v-for="(btn, idx) in buttons" :key="idx" v-model:pressed="btn.state" variant="primary">
      {{ btn.caption }}
    </BButton>
  </BButtonGroup>
  <p>
    Pressed States: <strong>{{ btnStates }}</strong>
  </p>
</template>

<script setup lang="ts">
const buttonToggle = ref(false)
const buttons = ref([
  {caption: 'Toggle 1', state: true},
  {caption: 'Toggle 2', state: false},
  {caption: 'Toggle 3', state: true},
  {caption: 'Toggle 4', state: false},
])

const btnStates = computed(() => buttons.value.map((b) => b.state))
</script>

If using toggle button style for a radio or checkbox style interface, it is best to use the built-in button style support of BFormRadioGroup and BFormCheckboxGroup.

Loading ​

BButton supports several properties to indicate a loading state. When loading is true, the loading state is active, otherwise the normal button is displayed. When loading is active, loading-text is shown along with a spinner. If loading-fill is true, the button shows only the spinner and the loading-text is ignored. You can also override the spinner with an arbitrary component by using the loading-spinner slot or the entire content of the button with the loading slot.

<BButton :loading="true">Button</BButton>
<BButton :loading="true" loading-fill>Button</BButton>
<BButton :loading="true" loading-text="Please Wait...">Button</BButton>
<BButton :loading="false" loading-text="Please Wait...">Button</BButton>

Router link support ​

Refer to the Router support reference docs for the various supported RouterLink related props.

Accessibility ​

When the href prop is set to '#', BButton will render a link (<a>) element with attribute role="button" set and appropriate keydown listeners (Enter and Space) so that the link acts like a native HTML <button> for screen reader and keyboard-only users. When disabled, the aria-disabled="true" attribute will be set on the <a> element.

When the href is set to any other value (or the to prop is used), role="button" will not be added, nor will the keyboard event listeners be enabled.