Pegasus
Get Started
Components
Button
Buttons allow users to take actions, and make choices, with a single tap. Buttons can be used inside modal window, forms , cards , toolbars & navbars.
Basic Button
Basic buttons can be made using pre-defined button classes. It consists primary,secondary and link buttons.
<!-- add these predefined button classes for the button component -->
<button class="btn-primary">primary</button>
<button class="btn-secondary">Secondary</button>
<button class="btn-danger">danger</button>
<button class="btn-warning">warning</button>
<button class="btn-simple">simple</button>
<button class="btn-link" href="#">link</button>
Border Buttons
Border Buttons has solid borders around them and can be made using pre-defined button classes.
<!-- add particular classes to get the styling for border buttons -->
<button class=" border-btn border-btn-primary">primary</button>
<button class=" border-btn border-btn-secondary">Secondary</button>
<button class=" border-btn border-btn-danger">danger</button>
<button class=" border-btn border-btn-warning">warning</button>
<button class=" border-btn border-btn-simple">simple</button>
<button class=" border-btn border-btn-link" href="#">link</button>
Icon Buttons
Icon button contains Icon inside in it & can be made using predefined css classes.
<!-- add particular classes to get the styling for icon button -->
<button class=" border-btn border-btn-danger">
<i class="fas fa-trash-alt btn-icon"></i> delete
</button>
<button class="btn-primary">
<i class="fas fa-paper-plane btn-icon"></i> send
</button>
<button class=" border-btn border-btn-secondary">
<i class="fas fa-cart-arrow-down btn-icon"></i> cart
</button>
<button class="btn-simple">
<i class="fas fa-download btn-icon"></i> download
</button>
Floating Action Buttons
A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.
<!-- create FAB by adding perticular classes -->
<button class="fab btn-secondary">
<i class="fas fa-moon"></i>
</button>
<button class="fab btn-danger">
<i class="fas fa-plus"></i>
</button>
<button class="fab btn-simple">
<i class="fas fa-check"></i>
</button>
<button class="fab btn-primary">
<i class="fas fa-cart-arrow-down"></i>
</button>