UI Elements
Design system
Buttons
Variants, sizes, icon and disabled states
Badges & status pills
Semantic tones with optional status dot
Success
Warning
Danger
Info
Neutral
Completed
Pending
Failed
Active
Draft
Avatars
Initials, four sizes
IY
EK
MA
SJ
Alerts
All four semantic tones
Heads up
A new version of the dashboard is available.
Saved
Your changes were saved successfully.
Check your usage
You are approaching your monthly plan limit.
Payment failed
We could not process your last transaction.
Form controls
Inputs, select, textarea, checkbox and switch
Shown on your public profile.
Please enter a valid email address.
Tabs
Click to switch panels
Overview panel — a high-level summary of the account.
Activity panel — recent events and sign-ins.
Settings panel — preferences and configuration.
Progress bars
Default and semantic variants
Storage64%
Uptime98%
Quota82%
Errors27%
Table
Sortable header, user cell and status pills
| User | Plan | Amount | Status |
|---|---|---|---|
|
EK
Elif Kaya
elif@example.com
|
Pro | $149.00 | Completed |
|
MA
Marco Aurelio
marco@example.com
|
Starter | $49.00 | Pending |
|
TN
Trung Nguyen
trung@example.com
|
Team | $299.00 | Failed |
Tags
Removable chips
Design
Frontend
Marketing ×
Research ×
Pagination
Prev / page numbers / next
Dropdown menu
Click the button to toggle
Modal
Static preview + working trigger
Static preview of the dialog:
Confirm action
Are you sure you want to continue? This action cannot be undone.