Button

Show buttons with button component.

Solid Buttons

Solid buttons are available in 4 variants btn-primary, btn-secondary, btn-danger and btn-warn.

                        
<button class="btn-primary" type="button">Primary</button>
<button class="btn-success" type="button">Success</button>
<button class="btn-danger" type="button">Danger</button>
<button class="btn-warn" type="button">Warn</button>

Outline button

Outline buttons are available in 4 variants btn-outline-primary, btn-outline-success, btn-outline-danger and btn-outline-warn.

                        
<button class="btn-outline-primary" type="button">Primary</button>
<button class="btn-outline-success" type="button">Success</button>
<button class="btn-outline-danger" type="button">Danger</button>
<button class="btn-outline-warn" type="button">Warn</button>

Button with icon

Add btn-icon class and link to the icon (best to use from "https://icons8.com/icon/set/whatsapp/dotty--black" replace whatsapp with any icon name) to get button with badge.

                        
<button class="btn-success btn-icon" type="button">
    <img class="icon" src="..."/>
    <span>Add to Cart</span>
</button>
<button class="btn-danger btn-icon" type="button">
    <img class="icon" src="..."/>
    <span>Delete</span>
</button>