OrderTracker

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

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import {  OrderTracker,  Segmented,  Stack} from '@kerf-js/veneer'import type { OrderStage } from '@kerf-js/veneer'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 @kerf-js/veneer

Usage

tsx

import { OrderTracker } from '@kerf-js/veneer'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer'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