Round Buttons
Use .btn-{state} for different states
Square Buttons
Use .btn-square for square buttons
Pill Buttons
Use .btn-pill for pill buttons
Round Outline Buttons
Use .btn-outline-{state} for different outline states
Square Outline Buttons
Use .btn-square for square outline buttons
Pill Outline Buttons
Use .btn-pill for pill outline buttons
Round Gradient Buttons
Use .btn-gradient-{state} for different gradient states
Square Gradient Buttons
Use .btn-square for square gradient buttons
Pill Gradient Buttons
Use .btn-pill for pill gradient buttons
Round Buttons with Icon
Use .btn-{state} for different button states and .has-icon for icon buttons
Square Buttons with Icon
Use .btn-square for square icon buttons
Pill Buttons with Icon
Use .btn-pill for pill icon buttons
Round Icon Buttons
Use .ms-btn-icon .btn-{state} for different Icon states
Round Outline Icon Buttons
Use .ms-btn-icon-outline .btn-{state} for different Icon states
Square Icon Buttons
Use .btn-square for square Icon buttons
Square Outline Icon Buttons
Use .btn-square for square Icon buttons
Circle Icon Buttons
Use .btn-pill for circle Icon buttons
Circle Outline Icon Buttons
Use .btn-pill for circle Icon buttons
Button Groups
Use .btn-group.btn-group-toggle as a parent for multiple .btn
Use .flex-column for vertical button groups
Block Level Buttons
Use .btn-block for block level buttons