Data

Tags, chips, lists, stats, timelines, stepper, and the canonical DataTable.

Inline label with optional remove action.

designtypescriptedgebrandverifiedremovable

tsx

<Tag severity="primary" onRemove={() => {}}>design</Tag>

Toggleable filter chip with role=switch.

tsx

<Chip selected>Design</Chip>

Chip with a result count bubble, for faceted filter bars.

tsx

<FilterChip count={42}>Active</FilterChip>

Semantic list — bulleted / numbered / checked / plain.

tsx

<List variant="checked"><List.Item>…</List.Item></List>

Semantic key/value pairs via <dl> / <dt> / <dd>.

tsx

<DescriptionList><DescriptionList.Item>…</DescriptionList.Item></DescriptionList>

Directional indicator for a metric delta.

12.4%8ms4 users0

tsx

<StatTrend direction="up" value="12.4%" period="vs last week" />

Compound step indicator. 0-indexed currentStep.

tsx

<Stepper currentStep={1}>…</Stepper>

Vertical activity timeline with severity accents.

tsx

<Timeline><Timeline.Item severity="success">…</Timeline.Item></Timeline>

Semantic table with sort + selection. Here with realistic member data.

tsx

<DataTable<User> columns={cols} data={users} rowKey={(u) => u.id} />