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 inside . Get classes for material icon here.

Outline Icon Buttons

For Icon Buttons add inside . 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

Disable Outline Buttons

Make buttons look inactive by adding the disabled boolean attribute to any

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

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

Square Outline Buttons

For Square Buttons add class .btn-square to

Square Icon Buttons

For Square Icon Buttons add inside . Get classes for material icon here.

Outline Square Icon Buttons

For Outline Square Icon Buttons add inside . Get classes for material icon here.

Large Square Buttons

For Large Square Buttons add class .btn-lg to

Large Outline Square Buttons

For Large Outline Square Buttons add class .btn-lg to

Small Buttons

For Small Square Buttons add class .btn-sm to

Small Outline Buttons

For Small Outline Square Buttons add class .btn-sm to

Disable Square Buttons

For Disable Square Buttons add class .disabled to

Disable Square Outline Buttons

For Disable Outline Square Buttons add class .disabled to

Active Buttons

For Active Square Buttons add class .active to

Active Outline Buttons

For Active Outline Square Buttons add class .active to

Square Block Buttons

For Square Block Buttons add class .btn-block to

Block Square Outline Buttons

For Block Square Outline Buttons add class .btn-block to

Pill Buttons

For Pill Buttons add class .btn-pill to

Pill Outline Buttons

For Pill Buttons add class .btn-pill to

Pill Icon Buttons

For Pill Square Icon Buttons add inside . Get classes for material icon here.

Pill Outline Icon Buttons

For Pill Square Icon Buttons add inside . Get classes for material icon here.

Large Pill Buttons

For Large Pill Buttons add class .btn-lg to

Large Pill Outline Buttons

For Large Pill Outline Square Buttons add class .btn-lg to

Small Pill Buttons

For Small Pill Buttons add class .btn-sm to

Small Pill Outline Buttons

For Small Pill Outline Buttons add class .btn-sm to

Disable Buttons

For Disable Pill Buttons add class .disabled to

Disable Outline Buttons

For Disable Outline Pill Buttons add class .disabled to

Active Buttons

For Active Pill Buttons add class .active to

Active Outline Buttons

For Active Outline Pill Buttons add class .active to

Block Pill Buttons

For Block Pill Buttons add class .btn-block to

Block Pill Outline Buttons

For Block Pill Outline Buttons add class .btn-block to