Buttons

Default Buttons

Material Admin Pro's default buttons use Bootstrap's default button class names. These default buttons are equivalent to Material's unelevated button variant.

Note that the button examples below use the <button> element, but you can also use button classes with the <a> and <input> elements.

Raised Button Variant

The raised button variant is a button style created to match Material's raised button. These button classes are named using the format .btn-raised-{color} where color is any theme color defined in the color map.

Raised buttons have a slight box shadow to convey elevation along with a hover effect, which increases the elevation to provide feedback to the user.

Outline Button Variant

Outline button classes are included with Bootstrap's framework by default. In this implementation, the outline button has been modified to match Material Design's specifications. These button classes are named using the format .btn-outline-{color} where color is any theme color defined in the color map.

Text Button Variant

The text button variant is another custom button style created to match Material's text button styling. Button classes for this variant are named using the format .btn-text-{color} where color is any theme color defined in the color map.

Text buttons have no border and less horizontal padding, but still retain the hover and ripple effects.

Sizing

By default, Bootstrap includes three button sizes: small, default, and large. In addition, two more sizing options for buttons have been added, extra small and extra large variants.

The demo below shows the size variations using the raised button style, however all button styles (default, raised, outline, and text) are supported.

Leading Icon

Add a leading icon within a button element by including any icon from the Material Icons library (included with this theme) before the button text along with the .leading-icon class.

Leading icons scale appropriately to the button size.

To create buttons with an icon, but no text, view the icon buttons component created specifically for circular action buttons with a single icon.

Trailing Icon

Trailing icons are also supported within the button element. Add any icon from the Material Icons library after the button text along with the .trailing-icon class.

Material Design guidelines recommends that you do not use both a leading and trailing icon within the same button. Using both icons can make button's meaning unclear to users.

Button Group

Button groups are a series of buttons that are grouped together in a single line. They can be used to group actions together, as an alternative to navigation menus, or as form checkboxes and radio elements.

Additional styling options for button groups, like the button toolbar, nesting, and vertical groups, can be referenced by visiting Bootstrap's button group documentation on their website.

Close Button

The close button is a generic button you can use to dismiss content. It is available in the default style and a white variant, both of which have a disabled state.

Styling Examples

You can use utility classes to modify the appearance of buttons.