Tracker — Design System

Props

The full prop API for Tracker. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.

Prop	Type	Default	Description	Since
`data`	`TrackerItem[]`	—	Segments with optional key, label, semantic tone, numeric value, tooltip, and tokenized class overrides.	0.12.0
`variant`	`'bar' \| 'blocks' \| 'dots' \| 'timeline'`	`'bar'`	Visual model for dense bars, elevated blocks, status dots, or continuous timeline segments.	0.12.0
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Segment height preset. Dot mode maps the same values to dot diameter.	0.12.0
`radius`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	Segment radius preset.	0.12.0
`gap`	`'none' \| 'xs' \| 'sm' \| 'md'`	`'xs'`	Gap between segments.	0.12.0
`distribution`	`'equal' \| 'weighted'`	`'equal'`	Equal gives every segment the same width. Weighted uses each item value as flex growth.	0.12.0
`ariaLabel`	`string`	`'Status tracker'`	Accessible name for the tracker list.	0.12.0
`showLabels`	`boolean`	`false`	Shows item labels next to each segment for explanatory or timeline layouts.	0.12.0
`labelPosition`	`'top' \| 'bottom'`	`'bottom'`	Places visible item labels above or below the segments.	0.12.0
`selectedKey`	`string`	—	Marks one segment as selected when the tracker controls a detail view.	0.12.0
`onItemSelect`	`(item: TrackerItem, index: number) => void`	—	Makes each segment a labelled button and reports the selected item and index.	0.12.0
`itemClassName`	`string`	—	Tokenized Tailwind classes applied to every segment. Individual items can also pass className.	0.12.0
`labelClassName`	`string`	—	Tokenized Tailwind classes applied to visible labels. Individual items can also pass labelClassName.	0.12.0
`className`	`string`	—	Additional Tailwind classes on the root list.	0.12.0

Import

import { Tracker } from '@mihcm/ui/Tracker';