Material Bootstrap Buttons


Use Material Bootstrap custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.


Buttons

Material Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Primary Secondary Success Danger Warning Info Light Dark Link

StyleMode property allows the user to change the style of the elements.

Outlined Buttons


In need of a button, but not the hefty background colors they bring? Just add the class outlined to remove all background images and colors on any button.

Primary Secondary Success Danger Warning Info Light Dark Link

Setting the outlined property the elements turn into outlined buttons with no filling untill hovered.

Buttons Sizes


Fancy larger or smaller buttons? Just set the sizeMode property to 'sm' or 'lg' for additional sizes.

Large Button Large Button
Small Button Small Button

Buttons can be reset back to normal if SizeMode is set to an empty string.

Disabled Buttons


Primary Secondary

To disable/enable an element just set the disabled property.

Material Bootstrap Checkbox


Checkboxes are buttons that can be toggled. The checked state of these buttons can be updated via click or by setting the checked property to true. Checkboxes like the other toggle buttons can be pre-checked.

Checked

Unchecked

Appling/Removing the checked attribute will toggle the state of the button.

Material Bootstrap Toggle Button

Checked

Unchecked

Add the checked attribute to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the checked attribute to the button.

Material Bootstrap Radio Button

Active

Radio

Radio

Radio buttons are group elements that allow only one of them to be checked. Similar to the other toggle elements to set a button into checked state the property checked has to be applied to the element. All elements that have the same group property are considered to be in the same group. group can be set on initialization.

Material Design

Primary Secondary Success Danger Warning Info Light Dark Link

Outlined Material Buttons

Primary Secondary Success Danger Warning Info Light Dark Link

Outlined Material Checkbox Buttons

Checked

Unchecked

Outlined Material Radio Buttons

Active

Radio

Radio

Button Group

Btn 1 Btn 2 Btn 3

Vertical Button Group

Btn 1 Btn 2 Btn 3

Toggle Button Group

Toggle 1 Toggle 2 Toggle 3