Status sequence
Use Tracker for dense uptime windows, workflow coverage, and event timelines.
Integration health
Last six sync windows.
<Tracker data={trackerData} size="md" radius="full" />Compact timeline with no gaps
Use gap='none' when each segment represents a continuous range.
Each segment keeps its accessible label for assistive technology.
<Tracker data={trackerData} gap="none" size="sm" radius="sm" />Weighted service window
Use weighted blocks when each segment represents a different amount of time or volume.
Payroll sync allocation
Segment widths follow the supplied value field.
SyncedSyncedPendingBlockedQueuedRecovered
<Tracker data={trackerData} variant="blocks" distribution="weighted" showLabels gap="sm" radius="lg" />Selectable incident dots
Use selectable dots when the tracker drives a detail panel or timeline inspector.
Selected segment: 3
<Tracker data={trackerData} variant="dots" selectedKey={selectedKey} onItemSelect={setSelectedKey} />Timeline labels
Use timeline mode for review paths where labels need to stay tied to each stage.
SyncedSyncedPendingBlockedQueuedRecovered
<Tracker data={trackerData} variant="timeline" showLabels labelPosition="top" gap="none" />