Primary Buttons Sizes
<div class="flex items-end gap-12">
<button type="button" class="btn-sm bg-primary border border-primary text-white text-center hover:bg-primary-800 hover:border-primary-800 hover:text-white">Button</button>
<button type="button" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-800 hover:border-primary-800 hover:text-white">Button</button>
<button type="button" class="btn-lg bg-primary border border-primary text-white text-center hover:bg-primary-800 hover:border-primary-800 hover:text-white">Button</button>
</div>
Circular Buttons Sizes
<div class="flex items-end gap-12">
<button type="button" class="w-7.5 h-7.5 flex justify-center items-center bg-primary border border-primary text-white text-center hover:bg-primary-800 hover:border-primary-800 hover:text-white rounded-full cursor-pointer"><i class="icon icon-chevron-right"></i></button>
<button type="button" class="w-8.75 h-8.75 flex justify-center items-center bg-primary border border-primary text-white text-center text-lg hover:bg-primary-800 hover:border-primary-800 hover:text-white rounded-full cursor-pointer"><i class="icon icon-chevron-right"></i></button>
<button type="button" class="w-11 h-11 flex justify-center items-center bg-primary border border-primary text-white text-center text-xl hover:bg-primary-800 hover:border-primary-800 hover:text-white rounded-full cursor-pointer"><i class="icon icon-chevron-right"></i></button>
</div>
Default Buttons
<div class="flex items-end gap-9">
<button type="button" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-800 hover:border-primary-800 hover:text-white">Primary</button>
<button type="button" class="btn bg-dark border border-dark text-white text-center hover:bg-black hover:border-black hover:text-white">Dark</button>
<button type="button" class="btn bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:border-light-800 hover:text-dark">Light</button>
<button type="button" class="btn bg-info border border-info text-white text-center hover:bg-info-800 hover:border-info-800 hover:text-white">Info</button>
<button type="button" class="btn bg-warning border border-warning text-white text-center hover:bg-warning-800 hover:border-warning-800 hover:text-white">Warning</button>
<button type="button" class="btn bg-success border border-success text-white text-center hover:bg-success-800 hover:border-success-800 hover:text-white">Success</button>
<button type="button" class="btn bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:border-danger-800 hover:text-white">Error</button>
</div>
Outline Buttons
<div class="flex items-end gap-9">
<button type="button" class="btn bg-transparent border border-primary text-primary text-center hover:bg-primary-100">Primary</button>
<button type="button" class="btn bg-transparent border border-dark text-dark text-center hover:bg-gray-100">Dark</button>
<button type="button" class="btn bg-transparent border border-border-color text-gray-700 text-center hover:bg-light-100">Light</button>
<button type="button" class="btn bg-transparent border border-info text-info text-center hover:bg-info-100">Info</button>
<button type="button" class="btn bg-transparent border border-warning text-warning text-center hover:bg-warning-100">Warning</button>
<button type="button" class="btn bg-transparent border border-success text-success text-center hover:bg-success-100">Success</button>
<button type="button" class="btn bg-transparent border border-danger text-danger text-center hover:bg-danger-100">Error</button>
</div>
Ghost Buttons
<div class="flex items-end gap-9">
<button type="button" class="btn bg-primary-100 border border-primary text-primary text-center hover:bg-primary-200">Primary</button>
<button type="button" class="btn bg-gray-100 border border-dark text-dark text-center hover:bg-gray-200">Dark</button>
<button type="button" class="btn bg-light-100 border border-border-color text-dark text-center hover:bg-gray-200">Light</button>
<button type="button" class="btn bg-info-100 border border-info text-info text-center hover:bg-info-200">Info</button>
<button type="button" class="btn bg-warning-100 border border-warning text-warning text-center hover:bg-warning-200">Warning</button>
<button type="button" class="btn bg-success-100 border border-success text-success text-center hover:bg-success-200">Success</button>
<button type="button" class="btn bg-danger-100 border border-danger text-danger text-center hover:bg-danger-200">Error</button>
</div>
Rounded Buttons
<div class="flex items-end gap-9">
<button type="button" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-800 hover:border-primary-800 hover:text-white rounded-full">Primary</button>
<button type="button" class="btn bg-dark border border-dark text-white text-center hover:bg-black hover:border-black hover:text-white rounded-full">Dark</button>
<button type="button" class="btn bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:border-light-800 hover:text-dark rounded-full">Light</button>
<button type="button" class="btn bg-info border border-info text-white text-center hover:bg-info-800 hover:border-info-800 hover:text-white rounded-full">Info</button>
<button type="button" class="btn bg-warning border border-warning text-white text-center hover:bg-warning-800 hover:border-warning-800 hover:text-white rounded-full">Warning</button>
<button type="button" class="btn bg-success border border-success text-white text-center hover:bg-success-800 hover:border-success-800 hover:text-white rounded-full">Success</button>
<button type="button" class="btn bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:border-danger-800 hover:text-white rounded-full">Error</button>
</div>
Outline Round Buttons
<div class="flex items-end gap-9">
<button type="button" class="btn bg-transparent border border-primary text-primary text-center hover:bg-primary-100 rounded-full">Primary</button>
<button type="button" class="btn bg-transparent border border-dark text-dark text-center hover:bg-gray-100 rounded-full">Dark</button>
<button type="button" class="btn bg-transparent border border-border-color text-gray-700 text-center hover:bg-light-100 rounded-full">Light</button>
<button type="button" class="btn bg-transparent border border-info text-info text-center hover:bg-info-100 rounded-full">Info</button>
<button type="button" class="btn bg-transparent border border-warning text-warning text-center hover:bg-warning-100 rounded-full">Warning</button>
<button type="button" class="btn bg-transparent border border-success text-success text-center hover:bg-success-100 rounded-full">Success</button>
<button type="button" class="btn bg-transparent border border-danger text-danger text-center hover:bg-danger-100 rounded-full">Error</button>
</div>
Ghost Round Buttons
<div class="flex items-end gap-9">
<button type="button" class="btn bg-primary-100 border border-primary text-primary text-center hover:bg-primary-200 rounded-full">Primary</button>
<button type="button" class="btn bg-gray-100 border border-dark text-dark text-center hover:bg-gray-200 rounded-full">Dark</button>
<button type="button" class="btn bg-light-100 border border-border-color text-dark text-center hover:bg-gray-200 rounded-full">Light</button>
<button type="button" class="btn bg-info-100 border border-info text-info text-center hover:bg-info-200 rounded-full">Info</button>
<button type="button" class="btn bg-warning-100 border border-warning text-warning text-center hover:bg-warning-200 rounded-full">Warning</button>
<button type="button" class="btn bg-success-100 border border-success text-success text-center hover:bg-success-200 rounded-full">Success</button>
<button type="button" class="btn bg-danger-100 border border-danger text-danger text-center hover:bg-danger-200 rounded-full">Error</button>
</div>
Default Buttons with Left Icon
<div class="flex items-end gap-9">
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-primary border border-primary text-white text-center hover:bg-primary-800 hover:border-primary-800 hover:text-white"><i class="icon icon-chevron-left"></i>Primary</button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-dark border border-dark text-white text-center hover:bg-black hover:border-black hover:text-white"><i class="icon icon-chevron-left"></i>Dark</button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:border-light-800 hover:text-dark"><i class="icon icon-chevron-left"></i>Light</button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-info border border-info text-white text-center hover:bg-info-800 hover:border-info-800 hover:text-white"><i class="icon icon-chevron-left"></i>Info</button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-warning border border-warning text-white text-center hover:bg-warning-800 hover:border-warning-800 hover:text-white"><i class="icon icon-chevron-left"></i>Warning</button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:border-success-800 hover:text-white"><i class="icon icon-chevron-left"></i>Success</button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:border-danger-800 hover:text-white"><i class="icon icon-chevron-left"></i>Error</button>
</div>
Default Buttons with Right Icon
<div class="flex items-end gap-9">
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-primary border border-primary text-white text-center hover:bg-primary-800 hover:border-primary-800 hover:text-white">Primary<i class="icon icon-chevron-right"></i></button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-dark border border-dark text-white text-center hover:bg-black hover:border-black hover:text-white">Dark<i class="icon icon-chevron-right"></i></button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:border-light-800 hover:text-dark">Light<i class="icon icon-chevron-right"></i></button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-info border border-info text-white text-center hover:bg-info-800 hover:border-info-800 hover:text-white">Info<i class="icon icon-chevron-right"></i></button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-warning border border-warning text-white text-center hover:bg-warning-800 hover:border-warning-800 hover:text-white">Warning<i class="icon icon-chevron-right"></i></button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:border-success-800 hover:text-white">Success<i class="icon icon-chevron-right"></i></button>
<button type="button" class="btn flex items-center justify-center gap-1.5 cursor-pointer bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:border-danger-800 hover:text-white">Error<i class="icon icon-chevron-right"></i></button>
</div>
'/%3e%3cpath%20d='M19.3718%208.44531C13.2794%208.77342%208.42255%2013.8273%208.42255%2020.0001V34.643C8.42255%2036.336%207.05011%2037.7085%205.35714%2037.7085C3.66416%2037.7085%202.29171%2036.336%202.29171%2034.643V22.0124C5.86298%2012.0352%2013.2293%208.65628%2019.3718%208.44531Z'%20fill='url(%23paint1_linear_1134_24406)'/%3e%3cpath%20d='M24.111%2018.6378L20.8502%2019.8353L19.6368%2023.0902L18.4392%2019.8294L15.1843%2018.616L18.4451%2017.4184L19.6586%2014.1636L20.8561%2017.4243L24.111%2018.6378Z'%20fill='url(%23paint2_linear_1134_24406)'/%3e%3cpath%20d='M26.0749%2014.0398L24.7502%2014.5263L24.2573%2015.8486L23.7708%2014.5239L22.4485%2014.0309L23.7732%2013.5444L24.2661%2012.2221L24.7526%2013.5468L26.0749%2014.0398Z'%20fill='url(%23paint3_linear_1134_24406)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_1134_24406'%20x1='21.5672'%20y1='33.2429'%20x2='17.6287'%20y2='7.94212'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_1134_24406'%20x1='5.99286'%20y1='14.1017'%20x2='11.3239'%20y2='34.0911'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
