--- layout: default title: "Buttons - Sleek Admin Dashboard Template" bodyClass: "header-fixed sidebar-fixed sidebar-dark header-light" parent: "ui-elements" sub_parent: "components" activePage: "buttons-default" ---

# Button Default

{% include breadcrumb.htm %}

## Default Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Read bootstrap documentaion for more details.

## Default Outline Buttons

For outline button add classes `.btn-outline-*`. Read bootstrap documentaion for more details.

## Default Icon Buttons

For Icon Buttons add `<i class="mdi mdi-*"></i>` inside `<button class="btn">` . Get classes for material icon here.

## Outline Icon Buttons

For Icon Buttons add `<i class="mdi mdi-*"></i>` inside `<button class="btn btn-outline-*">` . Get classes for material icon here.

## Large Buttons

Add `.btn-lg` or for additional sizes. Read bootstrap documentaion for more details.

## Large Outline Buttons

Add `.btn-lg btn-outline-*` or for additional sizes. Read bootstrap documentaion for more details.

## Small Buttons

Add `.btn-sm` or for additional sizes. Read bootstrap documentaion for more details.

## Small Outline Buttons

Add `.btn-sm btn-outline-*` or for additional sizes. Read bootstrap documentaion for more details.

## Disable Buttons

Make buttons look inactive by adding the `disabled` boolean attribute to any <button> element. Read bootstrap documentaion for more details.

## Disable Outline Buttons

Make buttons look inactive by adding the `disabled` boolean attribute to any <button> element. Read bootstrap documentaion for more details.

## Active Buttons

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. Read bootstrap documentaion for more details.

## Active Outline Buttons

For Active Outline Buttons add class `.active` to `<div class="btn btn-outline-*">`

## Block Buttons

Create block level buttons—those that span the full width of a parent—by adding `.btn-block` . Read bootstrap documentaion for more details.

## Block Outline Buttons

Create block level outline buttons—those that span the full width of a parent—by adding `.btn-block .btn-outline-*`. Read Bootstrap documentaion for more details.

## Square Buttons

For Square Buttons add class `.btn-square` to `<button class="btn btn-*">`

## Square Outline Buttons

For Square Buttons add class `.btn-square` to `<button class="btn btn-outline-primary">`

## Square Icon Buttons

For Square Icon Buttons add `<i class="mdi mdi-*"></i>` inside `<button class="btn btn-square btn-*">` . Get classes for material icon here.

## Outline Square Icon Buttons

For Outline Square Icon Buttons add `<i class="mdi mdi-*"></i>` inside `<button class="btn btn-square btn-outline-*">` . Get classes for material icon here.

## Large Square Buttons

For Large Square Buttons add class `.btn-lg` to `<button class="btn btn-square btn-*">`

## Large Outline Square Buttons

For Large Outline Square Buttons add class `.btn-lg` to `<button class="btn btn-square btn-outline-*">`

## Small Buttons

For Small Square Buttons add class `.btn-sm` to `<button class="btn btn-square btn-*">`

## Small Outline Buttons

For Small Outline Square Buttons add class `.btn-sm` to `<button class="btn btn-square btn-outline-*">`

## Disable Square Buttons

For Disable Square Buttons add class `.disabled` to `<button class="btn btn-square btn-*">`

## Disable Square Outline Buttons

For Disable Outline Square Buttons add class `.disabled` to `<button class="btn btn-square btn-outline-*">`

## Active Buttons

For Active Square Buttons add class `.active` to `<button class="btn btn-square btn-*">`

## Active Outline Buttons

For Active Outline Square Buttons add class `.active` to `<button class="btn btn-square btn-outline-*">`

## Square Block Buttons

For Square Block Buttons add class `.btn-block` to `<button class="btn btn-square btn-*">`

## Block Square Outline Buttons

For Block Square Outline Buttons add class `.btn-block` to `<button class="btn btn-square btn-outline-*">`

## Pill Buttons

For Pill Buttons add class `.btn-pill` to `<button class="btn btn-*">`

## Pill Outline Buttons

For Pill Buttons add class `.btn-pill` to `<button class="btn btn-outline-primary">`

## Pill Icon Buttons

For Pill Square Icon Buttons add `<i class="mdi mdi-*"></i>` inside `<button class="btn btn-pill">` . Get classes for material icon here.

## Pill Outline Icon Buttons

For Pill Square Icon Buttons add `<i class="mdi mdi-*"></i>` inside `<button class="btn btn-pill btn-outline-*">` . Get classes for material icon here.

## Large Pill Buttons

For Large Pill Buttons add class `.btn-lg` to `<button class="btn btn-pill btn-*">`

## Large Pill Outline Buttons

For Large Pill Outline Square Buttons add class `.btn-lg` to `<button class="btn btn-pill btn-outline-*">`

## Small Pill Buttons

For Small Pill Buttons add class `.btn-sm` to `<button class="btn btn-pill btn-*">`

## Small Pill Outline Buttons

For Small Pill Outline Buttons add class `.btn-sm` to `<button class="btn btn-pill btn-outline-*">`

## Disable Buttons

For Disable Pill Buttons add class `.disabled` to `<button class="btn btn-pill btn-*">`

## Disable Outline Buttons

For Disable Outline Pill Buttons add class `.disabled` to `<button class="btn btn-pill btn-outline-*">`

## Active Buttons

For Active Pill Buttons add class `.active` to `<button class="btn btn-pill btn-*">`

## Active Outline Buttons

For Active Outline Pill Buttons add class `.active` to `<button class="btn btn-pill btn-outline-*">`

## Block Pill Buttons

For Block Pill Buttons add class `.btn-block` to `<button class="btn btn-pill btn-*">`

## Block Pill Outline Buttons

For Block Pill Outline Buttons add class `.btn-block` to `<button class="btn btn-pillbtn-outline-primary">`