Buttons
Bootstrap 5 Button component
Responsive Buttons built with the latest Bootstrap 5. Buttons provide predefined styles (warning, info, danger) for multiple button types: outline, rounded, social, floating, fixed, tags, etc.
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
Basic example
<button type="button" class="btn btn-primary">Button</button>
Disable text wrapping
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.
Colors
MDB includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light" data-mdb-ripple-color="dark">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link" data-mdb-ripple-color="dark">Link</button>
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.
Outline
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.
<button type="button" class="btn btn-outline-primary" data-mdb-ripple-color="dark">
Primary
</button>
<button type="button" class="btn btn-outline-secondary" data-mdb-ripple-color="dark">
Secondary
</button>
<button type="button" class="btn btn-outline-success" data-mdb-ripple-color="dark">
Success
</button>
<button type="button" class="btn btn-outline-danger" data-mdb-ripple-color="dark">
Danger
</button>
<button type="button" class="btn btn-outline-warning" data-mdb-ripple-color="dark">
Warning
</button>
<button type="button" class="btn btn-outline-info" data-mdb-ripple-color="dark">
Info
</button>
<button type="button" class="btn btn-outline-light" data-mdb-ripple-color="dark">
Light
</button>
<button type="button" class="btn btn-outline-dark" data-mdb-ripple-color="dark">
Dark
</button>
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.
Rounded
Add .btn-rounded class to make the button rounded.
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-light btn-rounded">Light</button>
<button type="button" class="btn btn-dark btn-rounded">Dark</button>
Rounded outline
You can use .btn-outline-* and .btn-rounded together to make the
button outline and rounded at the same time.
<button
type="button"
class="btn btn-outline-primary btn-rounded"
data-mdb-ripple-color="dark"
>
Primary
</button>
<button
type="button"
class="btn btn-outline-secondary btn-rounded"
data-mdb-ripple-color="dark"
>
Secondary
</button>
<button
type="button"
class="btn btn-outline-success btn-rounded"
data-mdb-ripple-color="dark"
>
Success
</button>
<button
type="button"
class="btn btn-outline-danger btn-rounded"
data-mdb-ripple-color="dark"
>
Danger
</button>
<button
type="button"
class="btn btn-outline-warning btn-rounded"
data-mdb-ripple-color="dark"
>
Warning
</button>
<button
type="button"
class="btn btn-outline-info btn-rounded"
data-mdb-ripple-color="dark"
>
Info
</button>
<button
type="button"
class="btn btn-outline-light btn-rounded"
data-mdb-ripple-color="dark"
>
Light
</button>
<button
type="button"
class="btn btn-outline-dark btn-rounded"
data-mdb-ripple-color="dark"
>
Dark
</button>
Floating
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.
<button type="button" class="btn btn-primary btn-floating">
<i class="fas fa-download"></i>
</button>
You can apply almost all the same classes and attributes to the floating buttons as to the regular buttons - colors, ripples, sizes, outline, etc.
<button type="button" class="btn btn-primary btn-lg btn-floating">
<i class="fab fa-facebook-f"></i>
</button>
<button
type="button"
class="btn btn-outline-success btn-floating"
data-mdb-ripple-color="dark"
>
<i class="fas fa-star"></i>
</button>
<button type="button" class="btn btn-danger btn-floating">
<i class="fas fa-magic"></i>
</button>
<button type="button" class="btn btn-dark btn-floating">
<i class="fab fa-apple"></i>
</button>
Sizes
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for
additional sizes.
<button type="button" class="btn btn-primary btn-sm">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary btn-lg">Button</button>
Active state
Add .active class to make the button look pressed.
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true"
>Primary link</a
>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true"
>Link</a
>
Disabled state
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.
<button type="button" class="btn btn-primary btn-lg" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
Disabled buttons using the <a> element behave a bit different:
-
<a>s don’t support thedisabledattribute, so you must add the.disabledclass to make it visually appear disabled. -
Some future-friendly styles are included to disable all
pointer-eventson anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all. -
Disabled buttons should include the
aria-disabled="true"attribute to indicate the state of the element to assistive technologies.
<a
href="#"
class="btn btn-primary btn-lg disabled"
tabindex="-1"
role="button"
aria-disabled="true"
>Primary link</a
>
<a
href="#"
class="btn btn-secondary btn-lg disabled"
tabindex="-1"
role="button"
aria-disabled="true"
>Link</a
>
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.
Toggle states
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>.
<button type="button" class="btn btn-primary" data-mdb-toggle="button" autocomplete="off">
Toggle button
</button>
<button
type="button"
class="btn btn-primary active"
data-mdb-toggle="button"
autocomplete="off"
aria-pressed="true"
>
Active toggle button
</button>
<button
type="button"
class="btn btn-primary"
disabled
data-mdb-toggle="button"
autocomplete="off"
>
Disabled toggle button
</button>
<a href="#" class="btn btn-primary" role="button" data-mdb-toggle="button">Toggle link</a>
<a
href="#"
class="btn btn-primary active"
role="button"
data-mdb-toggle="button"
aria-pressed="true"
>Active toggle link</a
>
<a href="#" class="btn btn-primary disabled" role="button" data-mdb-toggle="button"
>Disabled toggle link</a
>
If you want to support our friends from Tailwind Elements you can also check out the Tailwind buttons documentation.
Buttons - API
Usage
Via data attributes
For all buttons except fixed buttons
<button type="button" class="btn btn-primary" data-mdb-toggle="button" autocomplete="off">
Toggle button
</button>
Via JavaScript
const exampleEl = document.querySelector('example');
const myButton = new mdb.Button(exampleEl);
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$('#exampleID').button('methodName');
Methods
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() |
getInstance
|
Static method which allows you to get the button instance associated to a DOM element. | Button.getInstance(button) |
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()
})
Events
| 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...
})
Import
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import { Button } from 'mdb-ui-kit';