Component Gallery
Copy any block into your mockup pageButtons & command bar
Badges, state indicator, selector, progress
PlannedReleasedReserved
DeliveredPartially DeliveredBlocked
No dot
State indicator (page level, top-right of the title row). Click it to see all states. data-emphasis: primary | info | success | warning | danger | neutral.
Record selector (title row of a detail page):
Message bars
Information message.
Success message.
Warning message.
Error message.
Fields – read-only ↔ edit mode
Write fields read-only; the Edit button turns them into inputs based on data-type (text, number, date, lov, select, checkbox, textarea). Add data-readonly to keep a field locked.
EQ-0042
Compressor line 2
125
2026-10-21
WRO – Wrocław
Medium
Yes
Longer description text goes here.
Raw inputs
Value must be numeric.
Tabs & collapsible groups
Expanded group
Group content.
Collapsed group
Hidden content.
No dataThere are no records to show.
Third tab content.
Dialogs, side panels, annotations
Mockup callout pin:12
Note box – use for client comments. Toggle all notes from the user menu → “Show / hide mockup notes”.