Falcon LLP
ENG
ARB
GER
Notifications
Project Deadline
Project ‘ERP Upgrade’ is due in 3 days.
30 min
AD
New Order Placed
Order #SO-2345 has been placed by Adrian.
25 min
30 min
Low Stock Alert
Stock for Product A has dropped below the minimum threshold (15 units left).
30 min
SJ
Expense Added
New expense entry ‘Office Supplies’ worth $250 has been recorded.
2 hrs ago
Project Deadline
Project ‘ERP Upgrade’ is due in 3 days.
30 min
AD
New Order Placed
Order #SO-2345 has been placed by Adrian.
25 min
Search
I’m Looking For
Quick Actions
Search
Buttons
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-hover hover:border-primary-hover hover:text-white">Button</button>
<button type="button" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover hover:text-white">Button</button>
<button type="button" class="btn-lg bg-primary border border-primary text-white text-center hover:bg-primary-hover hover:border-primary-hover 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-hover hover:border-primary-hover 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-hover hover:border-primary-hover 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-hover hover:border-primary-hover 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-hover hover:border-primary-hover 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-hover hover:border-primary-hover 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-hover hover:border-primary-hover 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-hover hover:border-primary-hover 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>