Components
Navigation
Ways to move between views and through flows. Every pattern here works with arrow keys and announces where the person is.
TabsSegmentedControlStepperBreadcrumbsPagination
Tabs
Tabs switch between peer views of the same object. Arrow keys move between tabs and Tab moves into the panel. Underline tabs sit at the top of a page section; pill tabs live inside cards.
MappedTransformedUnresolved
41 product fields: 28 mapped, 9 transformed, 1 unsupported, 2 omitted and 1 unresolved.
61,430 writes today.
Segmented control
A segmented control changes how the same content is presented, such as a list or a table. It behaves like a radio group: one option is always selected and arrows move the selection.
Showing exceptions as a list.
Stepper
The Studio flow has five steps. Completed steps can be revisited; future steps cannot be skipped, because each one depends on evidence from the last. On small screens the stepper collapses to a compact summary.
Pagination
Pagination keeps the first and last page in reach and collapses the middle. On small screens it shows a compact page count between the arrows.
Page 3 of 12
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { id, label, description? }[] | – | Ordered steps. Labels stay short. |
| current | number | – | Zero-based index of the active step. |
| onStepClick | (index) => void | – | Lets people revisit completed steps only. |
| label | string | 'Progress' | Accessible name for the navigation landmark. |
Do
Use tabs for peer views of one thing
Products, variants and orders are all fields of the same plan, so they live in tabs on one page.
Connect · Scan · Map · Approve as tabs
Don't
Use tabs as steps in a flow
Tabs suggest any order is fine. When step 4 depends on step 3, use the stepper so the dependency is visible.