Material Admin Extended Dark

## Buttons

Use any of the available button classes to quickly create a styled button.

## Basic examples

Basic set of Bootstrap and custom buttons with different sizing and disabled stat.

#### Color Schemes

    <button class="btn btn-default">Default</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-danger">Danger</button>
    <button class="btn btn--light">MAE Style</button>
    <button class="btn btn-link">Link</button>

#### Sizing

    <button class="btn btn-default btn-lg">Large</button>
    <button class="btn btn-default">Default</button>
    <button class="btn btn-default btn-sm">Small</button>
    <button class="btn btn-default btn-xs">Extra Small</button>

#### Disable stat

    <button class="btn btn-default" disabled="disabled">Default</button>
    <button class="btn btn-info" disabled="disabled">Info</button>
    <button class="btn btn-primary" disabled="disabled">Primary</button>
    <button class="btn btn-success" disabled="disabled">Success</button>
    <button class="btn btn-warning" disabled="disabled">Warning</button>
    <button class="btn btn-danger" disabled="disabled">Danger</button>
    <button class="btn btn--light" disabled="disabled">MAE Style</button>

## Button Icons

You can refer the Icons page for the complete list of Material Design font icons.

#### Icon + text buttons

    <button class="btn btn-default btn--icon-text"><i class="zmdi zmdi-home"></i> Home</button>

#### Icon only rounded buttons

    <button class="btn btn-default btn--icon"><i class="zmdi zmdi-home"></i></button>

## Block Level Buttons

Create block level buttons those that span the full width of a parent by adding `.btn-block`

    <button class="btn btn-default btn-block">Default</button>

## Button Groups

Group a series of buttons together on a single line with the button group.

#### Basic example

    <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>

#### Button Toolbars

Combine sets of `.btn-group.` into a `.btn-toolbar` for more complex components.

    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">4</button>
            <button type="button" class="btn btn-default">5</button>
            <button type="button" class="btn btn-default">6</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">7</button>
            <button type="button" class="btn btn-default">8</button>
            <button type="button" class="btn btn-default">9</button>
        </div>
    </div>

#### Button Group Sizing

Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including when nesting multiple groups.

    <!-- Large -->
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>

    <!-- Default -->
    <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>

    <!-- Small -->
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>

    <!-- Extra Small -->
    <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>

#### Justified Button Groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

    <div class="btn-group btn-group-justified">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Left</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Middle</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Right</button>
        </div>
    </div>

#### Nesting

Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.

    <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>

        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown</button>
            <ul class="dropdown-menu">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
    </div>

Source files:

- LESS: `/less/inc/bootstrap-overrides/button.less`
- HTML: `/buttons.html`