--- layout: default title: "Buttons - Sleek Admin Dashboard Template" parent: "components" sub_parent: "components" activePage: "buttons-default" plugins: [] ---
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.
For outline button add classes .btn-outline-*
. Read bootstrap documentaion for more details.
For Icon Buttons add <i class="mdi mdi-*"></i>
inside <button class="btn">
. Get classes for material icon here.
For Icon Buttons add <i class="mdi mdi-*"></i>
inside <button class="btn btn-outline-*">
. Get classes for material icon here.
Add .btn-lg
or for additional sizes. Read bootstrap documentaion for more details.
Add .btn-lg btn-outline-*
or for additional sizes. Read bootstrap documentaion for more details.
Add .btn-sm
or for additional sizes. Read bootstrap documentaion for more details.
Add .btn-sm btn-outline-*
or for additional sizes. Read bootstrap documentaion for more details.
Make buttons look inactive by adding the disabled
boolean attribute to any <button> element. Read bootstrap documentaion for more details.
Make buttons look inactive by adding the disabled
boolean attribute to any <button>
element. Read bootstrap documentaion for more details.
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. Read bootstrap documentaion for more details.
For Active Outline Buttons add class .active
to <div class="btn btn-outline-*">
Create block level buttons—those that span the full width of a parent—by adding .btn-block
. Read bootstrap documentaion for more details.
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.
For Square Buttons add class .btn-square
to <button class="btn btn-*">
For Square Buttons add class .btn-square
to <button class="btn btn-outline-primary">
For Square Icon Buttons add <i class="mdi mdi-*"></i>
inside <button class="btn btn-square btn-*">
. Get classes for material icon here.
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.
For Large Square Buttons add class .btn-lg
to <button class="btn btn-square btn-*">
For Large Outline Square Buttons add class .btn-lg
to <button class="btn btn-square btn-outline-*">
For Small Square Buttons add class .btn-sm
to <button class="btn btn-square btn-*">
For Small Outline Square Buttons add class .btn-sm
to <button class="btn btn-square btn-outline-*">
For Disable Square Buttons add class .disabled
to <button class="btn btn-square btn-*">
For Disable Outline Square Buttons add class .disabled
to <button class="btn btn-square btn-outline-*">
For Active Square Buttons add class .active
to <button class="btn btn-square btn-*">
For Active Outline Square Buttons add class .active
to <button class="btn btn-square btn-outline-*">
For Square Block Buttons add class .btn-block
to <button class="btn btn-square btn-*">
For Block Square Outline Buttons add class .btn-block
to <button class="btn btn-square btn-outline-*">
For Pill Buttons add class .btn-pill
to <button class="btn btn-*">
For Pill Buttons add class .btn-pill
to <button class="btn btn-outline-primary">
For Pill Square Icon Buttons add <i class="mdi mdi-*"></i>
inside <button class="btn btn-pill">
. Get classes for material icon here.
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.
For Large Pill Buttons add class .btn-lg
to <button class="btn btn-pill btn-*">
For Large Pill Outline Square Buttons add class .btn-lg
to <button class="btn btn-pill btn-outline-*">
For Small Pill Buttons add class .btn-sm
to <button class="btn btn-pill btn-*">
For Small Pill Outline Buttons add class .btn-sm
to <button class="btn btn-pill btn-outline-*">
For Disable Pill Buttons add class .disabled
to <button class="btn btn-pill btn-*">
For Disable Outline Pill Buttons add class .disabled
to <button class="btn btn-pill btn-outline-*">
For Active Pill Buttons add class .active
to <button class="btn btn-pill btn-*">
For Active Outline Pill Buttons add class .active
to <button class="btn btn-pill btn-outline-*">
For Block Pill Buttons add class .btn-block
to <button class="btn btn-pill btn-*">
For Block Pill Outline Buttons add class .btn-block
to <button class="btn btn-pillbtn-outline-primary">