Timeline

Order placed
09:12
Payment received
09:14
Packed
11:30
Delivery delayed
15:02


import { Timeline } from '@gg-software/ui';
 
<Timeline
    items={[
        { title: 'Order placed', time: '09:12', color: 'success' },
        { title: 'Packed', time: '11:30' },
        { title: 'Delivery delayed', time: '15:02', color: 'danger' },
        { title: 'Custom dot', dot: <span>🚚</span> },
    ]}
/>;

Props

Prop	Type	Default	Description
`items`*	`TimelineItem[]`	—
`className`	`string`	—

* required · generated from packages/ui/src/display/Timeline/Timeline.tsx

Types


type TimelineItem = {
    title: ReactNode;
    time?: ReactNode;
    color?: TimelineColor; // 'default' | 'primary' | 'success' | 'warning' | 'danger'
    /** custom dot node (replaces the default coloured dot) */
    dot?: ReactNode;
};