Buttons

Overview

Buttons are based on Bootstrap's button components. Aisde from a few customizations outlined here in the documentation, they follow the same basic principles as Bootstrap buttons.

Button Colors

There are 6 basic buttons, Primary, Mid-Primary, Reversed, Warning, Success and Danger.

                                
<!-- Button Colors -->
<button type="button" class="btn btn-brand-primary btn-lg rounded-pill">Primary</button>
<button type="button" class="btn btn-brand-mid-primary btn-lg rounded-pill">Mid Primary</button>
<button type="button" class="btn btn-brand-primary-reverse btn-lg rounded-pill">Reversed</button>
<button type="button" class="btn btn-brand-warning btn-lg rounded-pill">Warning</button>
<button type="button" class="btn btn-brand-success btn-lg rounded-pill">Success</button>
<button type="button" class="btn btn-brand-danger btn-lg rounded-pill">Danger</button>
Button Sizing

Sizing is set for small, regular, large and an additional custom XL size.

                                
<!-- Button Sizing -->
<button type="button" class="btn btn-brand-primary btn-sm rounded-pill">Small</button>
<button type="button" class="btn btn-brand-primary rounded-pill">Regular</button>
<button type="button" class="btn btn-brand-primary btn-lg rounded-pill">Large</button>
<button type="button" class="btn btn-brand-primary btn-xl rounded-pill">Extra Large</button>
Button with Arrows

Buttons with arrows used to indicate previous and next for components like pagaination.

                                
<!-- Button with Arrows -->
<button class="btn btn-brand-primary-reverse rounded-pill btn-xl arrow-prev" href="#"><i data-feather="arrow-left" width="18" height="18" stroke-width="2"></i> Prev</button>
<button class="btn btn-brand-primary-reverse rounded-pill btn-xl arrow-next" href="#">Next <i data-feather="arrow-right" width="18" height="18" stroke-width="2"></i></button>