rocket_launch
Launchpad Enterprise Solutions
push_pin
Overview
dashboard
Dashboard
palette
Component Showcase
chevron_right
vertical_align_top
All (top of page)
widgets
UI Controls
chevron_right
smart_button
Button
verified
Badge
label
Pill
label_important
Label
filter_alt
Chip
account_circle
Avatar
progress_activity
Spinner
linear_scale
Progress
notifications
Notifications
chevron_right
campaign
Alert
notifications_active
Toast
arrow_drop_down_circle
Dropdown
content_copy
Copy
dashboard
Layout
chevron_right
cards
Card
open_in_new
Modal
table_rows
Table
timeline
Timeline
tab
Tabs
touch_app
Interactive
chevron_right
unfold_less
Collapse
expand_circle_down
Accordion
more_horiz
Pagination
linear_scale
Stepper
tune
Slider
star
Rating
account_tree
Tree View
auto_awesome
Specialized
chevron_right
search
Autocomplete
expand_more
Select
signpost
Breadcrumb
view_day
Skeleton
inbox
Empty State
view_carousel
Carousel
menu_open
Context Menu
format_list_bulleted
List Group
info
Tooltip
edit_note
Forms
chevron_right
input
Inputs
check_box
Checkbox
toggle_on
Switch
pin
OTP
Components
expand_circle_down
01. Accordion
campaign
02. Alerts
account_circle
03. Avatars
verified
04. Badges
signpost
05. Breadcrumb
format_list_bulleted
06. Button Group
smart_button
07. Buttons
cards
08. Cards
view_carousel
09. Carousel
filter_alt
10. Chips
content_copy
11. Copy to Clipboard
arrow_drop_down_circle
12. Dropdowns
label_important
13. Labels
open_in_new
14. Modals
swap_horiz
15. Page Navigation
more_horiz
16. Pagination
label
17. Pills
progress_activity
18. Progress
link
19. Quick Links
view_sidebar
20. Sidebar
table
21. Tables
tab
22. Tabs
timeline
23. Timeline
notifications
24. Toasts
info
25. Tooltips
Forms
text_fields
01. Text Inputs
subject
02. Textareas
arrow_drop_down
03. Selects
manage_search
04. Autocomplete
check_box
05. Checkbox / Radio
toggle_on
06. Switches
upload_file
07. File Input
palette
08. Color Input
pin
09. OTP Input
tune
10. Sliders
star_rate
11. Rating
progress_activity
12. Progress
format_size
13. Floating Labels
segment
14. Input Groups
view_agenda
15. Form Layouts
auto_fix_high
16. Enhancements
verified
17. Validation
Layout
grid_on
Grid System
Utilities
animation
01. Animations
border_all
02. Borders & Dividers
palette
03. Colors & BG
view_quilt
04. Display & Flex
auto_awesome
05. Effects & Transitions
grid_view
06. Grid & Aspect
emoji_symbols
07. Icons
touch_app
08. Interactivity
print
09. Print
aspect_ratio
10. Sizing
space_bar
11. Spacing
text_fields
12. Typography
Data
dataset
DataTable
Plugins
drag_indicator
Drag & Drop
Multi-Level Demo
link
Direct Link A
bolt
Direct Link B
looks_two
2 Levels
chevron_right
circle
Child A
circle
Child B
circle
Child C
rocket
Direct Link C
looks_3
3 Levels
chevron_right
folder
Level 2 A
folder_open
Level 2 B
chevron_right
circle
Level 3 A
circle
Level 3 B
looks_4
4 Levels
chevron_right
folder_open
Level 2
chevron_right
folder_open
Level 3
chevron_right
circle
Level 4 A
circle
Level 4 B
looks_5
5 Levels
chevron_right
folder_open
Level 2
chevron_right
folder_open
Level 3
chevron_right
folder_open
Level 4
chevron_right
circle
Level 5 A
circle
Level 5 B
menu
search
Ctrl K
notifications
3
Notifications
info
New component added
DataTable component is ready for testing.
2 min ago
check_circle
Build successful
Frontend build completed (109 KB CSS).
15 min ago
warning
Update available
Launchpad v1.1 is now available.
1 hour ago
H
H
Hitesh Vaghela
hitesh@launchpad.dev
person
My Profile
settings
Settings
help
Help & Support
logout
Sign Out
search
Esc
chevron_left
Progress
Sidebar
chevron_right
Quick Links
Chip-style inline shortcut links with optional collapse/expand for large sets.
Default
dashboard
Dashboard
analytics
Analytics
group
Users
settings
Settings
mail
Messages
calendar_month
Calendar
<div class="lp-quick-links"> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">dashboard</span> <span class="lp-quick-links-label">Dashboard</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">analytics</span> <span class="lp-quick-links-label">Analytics</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">group</span> <span class="lp-quick-links-label">Users</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">settings</span> <span class="lp-quick-links-label">Settings</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">mail</span> <span class="lp-quick-links-label">Messages</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">calendar_month</span> <span class="lp-quick-links-label">Calendar</span> </a> </div>
Contextual colors (per-item modifier)
add_task
Primary
layers
Secondary
check_circle
Success
delete
Danger
warning
Warning
info
Info
<div class="lp-quick-links"> <a href="#" class="lp-quick-links-item lp-quick-links-item-primary"> <span class="lp-quick-links-icon material-symbols-rounded">add_task</span> <span class="lp-quick-links-label">Primary</span> </a> <a href="#" class="lp-quick-links-item lp-quick-links-item-secondary"> <span class="lp-quick-links-icon material-symbols-rounded">layers</span> <span class="lp-quick-links-label">Secondary</span> </a> <a href="#" class="lp-quick-links-item lp-quick-links-item-success"> <span class="lp-quick-links-icon material-symbols-rounded">check_circle</span> <span class="lp-quick-links-label">Success</span> </a> <a href="#" class="lp-quick-links-item lp-quick-links-item-danger"> <span class="lp-quick-links-icon material-symbols-rounded">delete</span> <span class="lp-quick-links-label">Danger</span> </a> <a href="#" class="lp-quick-links-item lp-quick-links-item-warning"> <span class="lp-quick-links-icon material-symbols-rounded">warning</span> <span class="lp-quick-links-label">Warning</span> </a> <a href="#" class="lp-quick-links-item lp-quick-links-item-info"> <span class="lp-quick-links-icon material-symbols-rounded">info</span> <span class="lp-quick-links-label">Info</span> </a> </div>
Borderless
home
Home
search
Search
favorite
Favorites
star
Starred
bookmark
Saved
<div class="lp-quick-links lp-quick-links-borderless"> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">home</span> <span class="lp-quick-links-label">Home</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">search</span> <span class="lp-quick-links-label">Search</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">favorite</span> <span class="lp-quick-links-label">Favorites</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">star</span> <span class="lp-quick-links-label">Starred</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">bookmark</span> <span class="lp-quick-links-label">Saved</span> </a> </div>
Divided (tight gap — mixed per-item colors)
add_circle
Create Purchase Order
receipt_long
Purchase Order History
add_circle
Create Indents
delete
Cancel Order
<div class="lp-quick-links lp-quick-links-divided"> <a href="#" class="lp-quick-links-item lp-quick-links-item-primary"> <span class="lp-quick-links-icon material-symbols-rounded">add_circle</span> <span class="lp-quick-links-label">Create Purchase Order</span> </a> <a href="#" class="lp-quick-links-item lp-quick-links-item-info"> <span class="lp-quick-links-icon material-symbols-rounded">receipt_long</span> <span class="lp-quick-links-label">Purchase Order History</span> </a> <a href="#" class="lp-quick-links-item lp-quick-links-item-success"> <span class="lp-quick-links-icon material-symbols-rounded">add_circle</span> <span class="lp-quick-links-label">Create Indents</span> </a> <a href="#" class="lp-quick-links-item lp-quick-links-item-danger"> <span class="lp-quick-links-icon material-symbols-rounded">delete</span> <span class="lp-quick-links-label">Cancel Order</span> </a> </div>
Collapsible (many links — click the chevron to expand)
dashboard
Dashboard
analytics
Analytics
group
Users
settings
Settings
mail
Messages
calendar_month
Calendar
folder
Files
shopping_cart
Orders
payments
Billing
bar_chart
Reports
inventory_2
Inventory
local_shipping
Shipping
support_agent
Support
security
Security
<div class="lp-quick-links" data-lp-component="quick-links"> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">dashboard</span> <span class="lp-quick-links-label">Dashboard</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">analytics</span> <span class="lp-quick-links-label">Analytics</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">group</span> <span class="lp-quick-links-label">Users</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">settings</span> <span class="lp-quick-links-label">Settings</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">mail</span> <span class="lp-quick-links-label">Messages</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">calendar_month</span> <span class="lp-quick-links-label">Calendar</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">folder</span> <span class="lp-quick-links-label">Files</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">shopping_cart</span> <span class="lp-quick-links-label">Orders</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">payments</span> <span class="lp-quick-links-label">Billing</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">bar_chart</span> <span class="lp-quick-links-label">Reports</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">inventory_2</span> <span class="lp-quick-links-label">Inventory</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">local_shipping</span> <span class="lp-quick-links-label">Shipping</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">support_agent</span> <span class="lp-quick-links-label">Support</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">security</span> <span class="lp-quick-links-label">Security</span> </a> </div>
Collapsible responsive (color-tinted — resize to trigger overflow)
rocket_launch
Launch
bolt
Quick Actions
trending_up
Trends
insights
Insights
hub
Integrations
webhook
Webhooks
api
API Keys
terminal
Console
monitor_heart
Monitoring
notifications
Alerts
<div class="lp-quick-links lp-quick-links-primary" data-lp-component="quick-links"> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">rocket_launch</span> <span class="lp-quick-links-label">Launch</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">bolt</span> <span class="lp-quick-links-label">Quick Actions</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">trending_up</span> <span class="lp-quick-links-label">Trends</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">insights</span> <span class="lp-quick-links-label">Insights</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">hub</span> <span class="lp-quick-links-label">Integrations</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">webhook</span> <span class="lp-quick-links-label">Webhooks</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">api</span> <span class="lp-quick-links-label">API Keys</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">terminal</span> <span class="lp-quick-links-label">Console</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">monitor_heart</span> <span class="lp-quick-links-label">Monitoring</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">notifications</span> <span class="lp-quick-links-label">Alerts</span> </a> </div>
Collapsible (few links — toggle auto-hidden)
check_circle
Completed
task_alt
Approved
verified
Verified
<div class="lp-quick-links lp-quick-links-success" data-lp-component="quick-links"> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">check_circle</span> <span class="lp-quick-links-label">Completed</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">task_alt</span> <span class="lp-quick-links-label">Approved</span> </a> <a href="#" class="lp-quick-links-item"> <span class="lp-quick-links-icon material-symbols-rounded">verified</span> <span class="lp-quick-links-label">Verified</span> </a> </div>
chevron_left
Progress
Sidebar
chevron_right
expand_less
expand_more