Vue Bootstrap Buttons
Vue Buttons - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Use Vue Bootstrap custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
Sizes
Fancy larger or smaller buttons? Add size="lg" or size="sm" for additional sizes.
<template>
<div>
<mdb-btn size="lg" color="primary">Large button</mdb-btn>
<mdb-btn size="lg" color="default">Large button</mdb-btn>
</div>
<template>
<script>
import { mdbBtn } from 'mdbvue';
export default {
name: 'ButtonPage',
components: {
mdbBtn
}
}
</script>
<template>
<div>
<mdb-btn size="sm" color="primary">Small button</mdb-btn>
<mdb-btn size="sm" color="default">Small button</mdb-btn>
</div>
</template>
<script>
import { mdbBtn } from 'mdbvue';
export default {
name: 'ButtonPage',
components: {
mdbBtn
}
}
</script>
Create block level buttons—those that span the full width of a parent—by adding block.
<template>
<div>
<mdb-btn block color="default">Block level button</mdb-btn>
<mdb-btn block color="primary">Block level button</mdb-btn>
</div>
</template>
<script>
import { mdbBtn } from 'mdbvue';
export default {
name: 'ButtonPage',
components: {
mdbBtn
}
}
</script>
Button states
Active state
btns will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <btn>s as they use a pseudo-class.
However, you can still force the same active appearance with active should you need to replicate the state programmatically.
<template>
<div>
<mdb-btn active size="lg" color="primary">btn active</mdb-btn>
<mdb-btn tag="a" role="button" active size="lg" href="#">btn active</mdb-btn>
</div>
</template>
<script>
import { mdbBtn } from 'mdbvue';
export default {
name: 'ButtonPage',
components: {
mdbBtn
}
}
</script>
Disabled state
Make buttons look inactive by adding the disabled boolean attribute to any <btn> element.
<template>
<div>
<mdb-btn disabled size="lg" color="primary">Primary button</mdb-btn>
<mdb-btn disabled size="lg" color="default">Button</mdb-btn>
</div>
</template>
<script>
import { mdbBtn } from 'mdbvue';
export default {
name: 'ButtonPage',
components: {
mdbBtn
}
}
</script>
Link functionality caveat
The
.disabledclass usespointer-events: noneto try to disable the link functionality of<a>s, but that CSS property is not yet standardized. In addition, even in browsers that do supportpointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add atabindex="-1"attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
Button plugin
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Toggle states
<template>
<mdb-btn color="primary" @click.native="toggleActiveState" :active="active">Single Toggle</mdb-btn>
</template>
<script>
import { mdbBtn } from 'mdbvue';
export default {
data() {
return {
active: false,
};
},
name: 'ButtonPage',
components: {
mdbBtn
},
methods: {
toggleActiveState() {
this.active = !this.active;
}
}
}
</script>
Checkbox and radio buttons
<template>
<mdb-btn-group>
<mdb-btn color="primary" @click.native="toggleActiveState2" :active="active2">Checkbox 1 (pre-checked)</mdb-btn>
<mdb-btn color="primary" @click.native="toggleActiveState3" :active="active3">Checkbox 2</mdb-btn>
<mdb-btn color="primary" @click.native="toggleActiveState4" :active="active4">Checkbox 3</mdb-btn>
</mdb-btn-group>
</template>
<script>
import { mdbBtn, mdbBtnGroup } from 'mdbvue';
export default {
data() {
return {
active2: true,
active3: false,
active4: false
};
},
name: 'ButtonPage',
components: {
mdbBtn,
mdbBtnGroup
},
methods: {
toggleActiveState2() {
this.active2 = !this.active2;
},
toggleActiveState3() {
this.active3 = !this.active3;
},
toggleActiveState4() {
this.active4 = !this.active4;
}
}
}
</script>
<template>
<mdb-btn-group>
<mdb-btn color="primary" @click.native="toggleActiveState5" :active="active5">Radio 1 (preselected)</mdb-btn>
<mdb-btn color="primary" @click.native="toggleActiveState6" :active="active6">Radio 2</mdb-btn>
<mdb-btn color="primary" @click.native="toggleActiveState7" :active="active7">Radio 3</mdb-btn>
</mdb-btn-group>
</template>
<script>
import { mdbBtn, mdbBtnGroup } from 'mdbvue';
export default {
data() {
return {
active5: true,
active6: false,
active7: false
};
},
name: 'ButtonPage',
components: {
mdbBtn,
mdbBtnGroup
},
methods: {
toggleActiveState5() {
this.active5 = true;
this.active6 = false;
this.active7 = false;
},
toggleActiveState6() {
this.active5 = false;
this.active6 = true;
this.active7 = false;
},
toggleActiveState7() {
this.active5 = false;
this.active6 = false;
this.active7 = true;
}
}
}
</script>
Vue Buttons - API
In this section you will find advanced information about the Button component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Import statement
<script>
import { mdbBtn, mdbBtnFixed, mdbBtnFixedItem, mdbBtnGroup, mdbIcon } from 'mdbvue';
</script>
API Reference: Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag |
String | 'button' |
Changes button tag | <mdb-btn tag="a"> |
color |
String | 'default' |
Determines button color | <mdb-btn color="primary"> |
outline |
String | |
Changes button outline color | <mdb-btn outline="primary"> |
text |
String | |
Allows for easier button customization with regards to button text color and more. Simply add a color from our palette omitting the -text postfix - it will be added for you - and you are all set |
<mdb-btn color="primary" text="secondary"> |
size |
String | |
Determines button size | <mdb-btn size="lg"> |
block |
Boolean | false |
Create block level buttons | <mdb-btn block> |
role |
String | |
Adds role attribute to button | <mdb-btn role="..."> |
type |
String | |
Adds type attribute to button | <mdb-btn type="..."> |
active |
Boolean | false |
Adds active class | <mdb-btn active> |
disabled |
Boolean | false |
Adds disabled class | <mdb-btn disabled> |
icon |
String | |
Adds icon inside button | <mdb-btn icon="user"> |
iconLeft |
Boolean | false |
Determines the position of icon | <mdb-btn iconLeft> |
iconRight |
Boolean | false |
Determines the position of icon | <mdb-btn iconRight> |
gradient |
String | |
Adds gradient effect to button | <mdb-btn gradient="peach"> |
rounded |
Boolean | false |
Adds rounded effect to button | <mdb-btn rounded> |
floating |
Boolean | false |
Adds floating effect to button | <mdb-btn floating> |
flat |
Boolean | false |
Adds flat effect to button | <mdb-btn flat> |
transparent |
Boolean | false |
Makes button transparent | <mdb-btn transparent> |
save |
Boolean | false |
Usuful for save button inside select | <mdb-btn save> |
iconClass |
String | |
Changes icon's element class inside button | <mdb-btn iconClass="..." > |
iconColor |
String | |
Changes icon's element color | <mdb-btn iconColor="..." > |