Use MDB custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Note: Read the API tab to find all available options and advanced customization
If you don’t want the button text to wrap, you can add the
.text-nowrap class to the button. In Sass, you can set
$btn-white-space: nowrap to disable text wrapping for each button.
MDB includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be
conveyed to users of assistive technologies – such as screen readers. Ensure
that information denoted by the color is either obvious from the content itself
(e.g. the visible text), or is included through alternative means, such as
additional text hidden with the
.visually-hidden class.
In need of a button, but not the hefty background colors they bring? Replace the
default modifier classes with the .btn-outline-* ones to remove all
background images and colors on any button.
In the outline buttons, we recommend adding
data-mdb-ripple-color="dark" to change the color of the
ripple effect. The default light color of the ripple (applied
automatically to every button) may not be well visible in the case of light and
outline buttons.
To learn more about the ripple effect and all the available options have a look at Ripple Docs.
Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
Add .btn-rounded class to make the button rounded.
You can use .btn-outline-* and .btn-rounded together
to make the button outline and rounded at the same time.
Use .btn-floating class to make a circle button.
To make it works properly you have to put an icon inside. The text will not fit in. You can find hundreds of available icons in our icons docs.
You can apply almost all the same classes and attributes to the floating buttons as to the regular buttons - colors, ripples, sizes, outline, etc.
Fancy larger or smaller buttons? Add .btn-lg or
.btn-sm for additional sizes.
Add .active class to make the button look pressed.
Primary
link
Link
Make buttons look inactive by adding the disabled boolean attribute
to any <button> element. Disabled buttons have
pointer-events: none applied to, preventing hover and active states
from triggering.
Disabled buttons using the <a> element behave a bit
different:
<a>s don’t support the disabled attribute, so
you must add the .disabled class to make it visually appear
disabled.
pointer-events on anchor buttons. In browsers which support that
property, you won’t see the disabled cursor at all.
aria-disabled="true" attribute to indicate the state of the
element to assistive technologies.
Primary link
Link
Link functionality caveat:
The .disabled class uses pointer-events: none to try
to disable the link functionality of <a>s, but that CSS
property is not yet standardized. In addition, even in browsers that do support
pointer-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 a
tabindex="-1" attribute on these links (to prevent them from
receiving keyboard focus) and use custom JavaScript to disable their
functionality.
Add data-mdb-toggle="button" to toggle a button’s
active state. If you’re pre-toggling a button, you must manually
add the .active class and
aria-pressed="true" to the <button>.
Toggle link
Active toggle link
Disabled
toggle link
For all buttons except fixed buttons
const exampleEl = document.querySelector('example');
const myButton = new mdb.Button(exampleEl);
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$('#exampleID').button('methodName');
You can create a button instance with the button constructor, for example:
const button = document.querySelector('#myButton')
const bsButton = new mdb.Button(button)
| Method | Description | Example |
|---|---|---|
dispose
|
Destroys an element's button. | instance.dispose() |
toggle
|
Toggles push state. Gives the button the appearance that it has been activated. | instance.toggle() |
show
|
Manually opens fixed button list. | instance.show() |
hide
|
Manually hides fixed button list. | instance.hide() |
For example, to toggle all buttons
const buttons = document.querySelectorAll('.btn')
buttons.forEach((button) => {
const button = new mdb.Button(button)
button.toggle()
})
| Name | Description |
|---|---|
show.mdb.button
|
This event fires immediately when the fixed button
show method has been called.
|
shown.mdb.button
|
This event is fired when a fixed button list has been made visible to the user (will wait for CSS transitions to complete). |
hide.mdb.button
|
This event is fired immediately when the fixed button
hide method has been called.
|
hidden.mdb.button
|
This event is fired when a fixed button list has been hidden from the user (will wait for CSS transitions to complete). |
const myFixedButton = document.getElementById('myFixedButton')
myFixedButton.addEventListener('show.mdb.button', function (e) {
// do something...
})
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import { Button } from 'mdb-ui-kit';