# Buttons

Buttons communicate actions users can take. In Material Admin Pro, there are four button variations to choose from which are all based on Material Design's button variants.

All of the buttons include the ripple effect by default in order to emphasize the different states a button can have, providing valuable visual feedback to users who interact with the element.

## 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.

### Styling Examples

Each button within a button group is styled independently, and can be styled using any button variation. For example, each button in a button group can use a different color.

### Checkbox Button Groups

Button groups can be used as checkbox-style toggle buttons, a feature provided by Bootstrap's framework.

Checkbox 1 Checkbox 2 Checkbox 3

### Radio Button Groups

Button groups can also be used as radio-style toggle buttons, where only one button can be selected at a time.

Radio 1 Radio 2 Radio 3

## 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.

Sharp edges using the `.rounded-0` utility class.

Extra padding using the `.px-4` and `.py-3` utility classes.

Text variations using the `.text-capitalize` and `.fw-bold` utility classes.

### Related Links

Icon Buttons Component

An alternative button styling featuring icons

Related Link arrow_upward
Bootstrap Button Documentation

Bootstrap's button component documentation

Related Link arrow_upward
Bootstrap Button Group Documentation

Bootstrap's button group component documentation

Related Link arrow_upward
Bootstrap Close Button Documentation

Bootstrap's close button component documentation

Related Link arrow_upward