Buttons

Default

Default Button

Use the button classes on an <a>, <button>, or <input> element.

<button type="button" class="btn btn-primary">Primary</button>

Outline

Outline Button

Use the .btn-outline-* classes to quickly create bordered buttons.

<button type="button" class="btn btn-outline-primary">Primary</button>

Rounded

Rounded Button

Add .btn-rounded to buttons to get large rounded corners.

<button type="button" class="btn btn-accent btn-rounded">Accent</button>

Rounded Outline

Rounded Outline Button

Use the .btn-outline-* and .btn-rounded classes together to quickly create bordered buttons with large rounded corners.

<button type="button" class="btn btn-outline-primary btn-rounded">Primary</button>

Icon

Icon Button

Add icons to any button or even use Icon-only buttons.

<button type="button" class="btn btn-light">

                              <i class="material-icons">favorite_border</i>

                            </button>

                            

                            <button type="button" class="btn btn-light">

                              <i class="material-icons icon--left">favorite</i> Favorite

                            </button>

Size

Button Size

Add .btn-lg or .btn-sm classes for additional button sizes.

<button type="button" class="btn btn-accent btn-lg">Large</button>

Disabled

Disabled Buttons

Add the disabled attribute to disable buttons.

<button type="button" class="btn btn-accent" disabled="">Accent</button>

Block

Button Block

Create block level buttons, by adding add .btn-block.

<button type="button" class="btn btn-block btn-outline-secondary">Block Button</button>

Dropdown

Button dropdown

<div class="btn-group">

                              <button type="button" class="btn btn-accent dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Accent</button>

                              <div class="dropdown-menu">

                                <a class="dropdown-item" href="#">Action</a>

                                <a class="dropdown-item" href="#">Another action</a>

                                <a class="dropdown-item" href="#">Something else here</a>

                                <div class="dropdown-divider"></div>

                                <a class="dropdown-item" href="#">Separated link</a>

                              </div>

                            </div>

Group

Button Group

Create a group of buttons by wrapping with .btn-group.

<div class="btn-group">

                              <button type="button" class="btn btn-light">Left</button>

                              <button type="button" class="btn btn-light">Middle</button>

                              <button type="button" class="btn btn-light">Right</button>

                            </div>