Back to Demo Center
Button Demo
Explore various button styles and interactions used throughout the LoanHubX platform.
Primary Gradient Buttons
Green Gradient Buttons
Secondary Buttons
Import Buttons
Button Sizes
Function Buttons
Outline style buttons with gradient borders and text
Status Pills
Status indicators used throughout the platform for displaying various states
Active Pending Inactive Completed Processing Failed
Multi Select Buttons
Toggle button groups used for filtering and selection throughout the platform
MSG2 - 2 Options
MSG3 - 3 Options
MSG4 - 4 Options
MSB2 - 2 Options
MSB3 - 3 Options
MSB4 - 4 Options
Square Buttons Large
Square Buttons Small
Icon Types
Different icon button styles and their use cases
Edit Icons
Delete Icons
Download Icons
Preview Icons
Action Icons
Label Icons
Letter Icons
Add Buttons
Small add buttons with gradient borders and icons
Color Demo
Color picker component used in modals throughout the platform
CSS Examples
Primary Gradient Button
background: linear-gradient(90deg, #479fea, #9bebfb 70%);
color: #000;
border-radius: 6px;
height: 31px;
padding: 0 16px;
font-size: 12px;
font-weight: 500;Green Gradient Button
background: linear-gradient(90deg, #00d457 0%, #00d4a9 100%);
color: #000;
border-radius: 6px;
height: 31px;
padding: 0 16px;
font-size: 12px;
font-weight: 500;