Timeline

@summonware/ui · timeline · P2 · Advanced UI
No reference page demonstrates this component — it was inferred from the screens that use one, so there is no variant matrix behind it.

Usage

A vertical sequence of dated events with a connecting line — an order history, an audit trail, a case's status log. The dot colour is meaning (`tone`), not decoration: use it the same way `Badge`'s tones work elsewhere in this library.
import { Timeline } from '@summonware/ui';

Best practices

DoOrder events oldest-first or newest-first consistently within one product — mixing the two across similar screens is a real, reported confusion.
Don'tUse this for more than a dozen or so events without pagination/collapsing. A timeline that scrolls forever stops being scannable.

Examples

Common configurations, variations and states.

Order history

  1. Order placed

    9:02 AM

  2. Payment confirmed

    9:03 AM

    Charged $1,004.36 to card ending 4242

  3. Shipped

    Yesterday

    Carrier: FedEx · Tracking 784552310

  4. Delivery attempted

    Today

    No one available to receive the package

A real status log — the last entry is a warning, not just another neutral step.

Where it appears

Used on 3 catalogued screens, including application-ec-order-detail, dashboard-index, widget-gallery.