OrderTracker

An order's progress: placed, packed, shipped, delivered.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { OrderTracker, Segmented, Stack } from '@weft-js/warp'import type { OrderStage } from '@weft-js/warp'export function Stages() {  const stage = state<OrderStage>('shipped')  return (    <Stack gap="group">      <OrderTracker stage={stage.value} />      <Segmented label="Stage" size="sm" value={stage.value} options={STAGES} onChange={v => (stage.value = v)} />    </Stack>  )}const STAGES: { value: OrderStage; label: string }[] = [{ value: 'placed', label: 'Placed' }, { value: 'packed', label: 'Packed' }, { value: 'shipped', label: 'Shipped' }, { value: 'delivered', label: 'Delivered' }]

Installation

npm install @weft-js/warp

Usage

tsx

import { OrderTracker } from '@weft-js/warp'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`stage`	`OrderStage`	`'placed'`	The current stop.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="tracker"] [data-part="rail"]

railrail-fillstop

RelatedOrder confirmation