Buttons
All variants, sizes, and states including loading and disabled.
Variants
Sizes
Loading state
Disabled state
Icon button
Inputs
Text, password, search, textarea, select with validation, error, and help text.
We will never share your email
Property name is required
Choose the role for this team member
Please select a status
Markdown is supported
Badges / Chips
Severity and status badges with optional dot indicator.
Severity badges
Status badges
Role badges
Card Patterns
Default, interactive, and flush card variants.
Default card
Riverside Tower
42 Harbour Rd, Melbourne
Interactive card
Summit Place
Hover to see elevation
Flush card
No inner padding on wrapper
Table
Responsive table with header styling, row hover, and pagination.
| Property | Inspector | Status | Started |
|---|---|---|---|
Riverside Tower 42 Harbour Rd | Sarah Chen | Completed | 1/20/2026 |
Summit Place 118 Collins St | James Nguyen | Processing | 2/1/2026 |
Parkview Estate 7 Botanical Ave | Maya Patel | Draft | Not started |
Greenfield Campus 23 University Dr | Liam O'Brien | Completed | 1/8/2026 |
Riverside Tower 42 Harbour Rd | Sarah Chen | Syncing | 2/10/2026 |
Page 1 of 3
Tabs
Segmented tab navigation with animated content transitions.
Overview tab content with property summary and quick stats.
Alerts / Banners
Contextual alerts with icon, title, body, and dismiss action.
Inspection scheduled
Report generated
Subscription expiring
Upload failed
Dismissible alert
Tooltip
Hover tooltips with configurable placement.
Skeleton Loaders
Placeholder content for loading states.
Text skeleton (3 lines)
Heading + avatar
Card skeleton
Table skeleton
Spinners
Loading indicators in various sizes.
Small
Medium
Large
XL
Full page spinner
Loading inspections
Stat Tiles
Compact metric displays used in dashboards and report headers.
Properties
12
Inspections
47
This month
8
Compliance
94%