General
Template
Layout
Typography
Navigational
Informational
- Info Boxes
- Output Boxes
-
Code Boxes
- Cards
Data
Input
Images
Header
Footer
Components - Info Display
Input Components - Buttons
Buttons as Input Components
Buttons - Provide input and invoke actions
- Buttons could be created using elements div span, a anchor elements. It is designed to be inblock elements.
Button - Submit
Implementation Code and the output
<span class="button-submit">
Show All
</span>
<div class="button-submit">
Submit
<i class="ph-bold ph-download-simple"></i>
</div>
<a class="button-submit" href="">
Download
<i class="ph-bold ph-download-simple"></i>
</a>
Output Sample
DownloadButton - Feedback
Implementation Code and the output
<a href="" class="button-feedback">
<i class="fa-regular fa-thumbs-up"></i>
Yes
</a>
<a href="" class="button-feedback">
<i class="fa-regular fa-thumbs-down"></i>
No
</a>
<span class="button-feedback">
<i class="fa-regular fa-thumbs-up"></i>
Yes
</span>
<span class="button-feedback">
<i class="fa-regular fa-thumbs-down"></i>
No
</span>
<div class="button-feedback">
Yes
</div>
<div class="button-feedback">
No
</div>
Output Sample
Yes NoButton - Black Classic
Implementation Code and the output
<span class="button-black-classic">
Show All
</span>
<div class="button-black-classic">
black-classic
<i class="ph-bold ph-download-simple"></i>
</div>
<a class="button-submit" href="">
Download
<i class="ph-bold ph-download-simple"></i>
</a>
Output Sample
DownloadButton - Black
Implementation Code and the output
<span class="button-black">
Show All
</span>
<div class="button-black">
Submit
<i class="ph-bold ph-download-simple"></i>
</div>
<a class="button-black" href="">
Download
<i class="ph-bold ph-download-simple"></i>
</a>
Output Sample
DownloadButton - Grey
Implementation Code and the output
<span class="button-grey">
Show All
</span>
<div class="button-grey">
Submit
<i class="ph-bold ph-download-simple"></i>
</div>
<a class="button-grey" href="">
Download
<i class="ph-bold ph-download-simple"></i>
</a>
Output Sample
DownloadButton - Grey Translucent
Implementation Code and the output
<span class="button-grey-translucent">
Show All
</span>
<div class="button-grey-translucent">
Submit
<i class="ph-bold ph-download-simple"></i>
</div>
<a class="button-grey-translucent" href="">
Download
<i class="ph-bold ph-download-simple"></i>
</a>
Output Sample
DownloadButton - Long
Implementation Code and the output
<span class="button-long">
Show All
</span>
<div class="button-long">
Submit
<i class="ph-bold ph-download-simple"></i>
</div>
<a class="button-long" href="">
Download
<i class="ph-bold ph-download-simple"></i>
</a>