skrewww

Content & Data

Timeline Item

Timeline Item is a single event in a chronological Timeline — activity feeds, order status history, audit logs.

State (Default/Highlighted) — 2 variants

Figma documentedReact not implementedDocumentation only

This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.

Figma availability
available
React availability
unavailable
Documentation completeness
partial
Maturity
documented

Known limitation: Implemented in React as an internal row composed by Timeline (components/ui/internal/TimelineItemRow.tsx) — see /components/timeline for the canonical, publicly documented, implemented pattern. This entry remains Figma-facing prose about the underlying Content/Timeline Item component; no Figma node ID has been confirmed for it yet.

Purpose

Timeline Item is a single event in a chronological Timeline — activity feeds, order status history, audit logs.

When to use

Sequential, time-stamped events where chronological order itself is meaningful.

When not to use

A fixed, known-length linear process with progress state — use Step Item.

Accessibility

Renders as an ordered list; timestamp available as real text, not just implied by position.

Common mistakes

Leaving the connector line visible on the final (most recent) event — should be hidden.

Properties

State as variants — Default is an outlined ring, Highlighted is a larger solid dot. Title (text), Timestamp (text), Description (text).

Tokens used

semantic/action/primarysemantic/border/defaultsemantic/text/primary

Known limitation

Implemented in React as an internal row composed by Timeline (components/ui/internal/TimelineItemRow.tsx) — see /components/timeline for the canonical, publicly documented, implemented pattern. This entry remains Figma-facing prose about the underlying Content/Timeline Item component; no Figma node ID has been confirmed for it yet.