Button
A button is a multi-purspose component, which can be used to submit form, redirect to a web-page, or trigger an event.
Types of Buttons
Add 'btn' around an icon, anchor tag or button tag to create a button. Supporting classes highlight different color shades and effects as per the requirement, like a primary button, an anchor button, an input or an icon button.
<button class="btn btn--primary">Primary</button>
<a class="btn btn--link">Anchor</a>
<input class="btn btn--curve" type="submit" value="Submit" />
<i class="fas fa-shopping-cart medium"></i>
<i class="fas fa-plus btn btn--float btn--round"></i>
Standard Buttons
Add 'btn--color_name' to create different shade of button.
<button class="btn btn--white">White</button>
<button class="btn btn--light">Light</button>
<button class="btn btn--dark">Dark</button>
<button class="btn btn--black">Black</button>
Colors
Buttons in these category are more relevant to some pre-defined use-cases, like error handling, show notification, floating button or an anchor tag button.
<button class="btn btn--primary">Primary</button>
<button class="btn btn--link">Link</button>
<button class="btn btn--success">Success</button>
<button class="btn btn--error">Error</button>
<button class="btn btn--icons">Icon</button>
<button class="btn btn--float">Floating</button>
Sizes
To control shapes and sizes of buttons add 'btn--size' or 'btn--round' along with other button classes.
<button class="btn btn--sm">Small</button>
<button class="btn">Normal</button>
<button class="btn btn--md">Medium</button>
<button class="btn btn--lg">Large</button>
<button class="btn btn--curve">Curve</button>
<i class="fas fa-bars btn btn--round lg sb"></i>
<button class="btn btn--wide">Wide</button>