Activity timeline

ActivityTimeline renders a chronological list of events as a vertical timeline — activity feeds, audit logs, change history. Each event is rendered top-to-bottom in chronological order (newest first by convention).

Use it for

• Activity feeds on user / company / project records
• Audit logs of state changes
• Change history (e.g. "Status changed from Pending to Active")
• Comment threads with timestamps

For non-chronological grouped items, use Board. For tabular activity, use Table.

Import

import { ActivityTimeline } from '@brikdesigns/bds';

Variants

Default

import { ActivityTimeline } from '@brikdesigns/bds';

const events = [
  {
    icon: <Icon icon="ph:pencil" />,
    label: 'Sarah Chen updated Brand Identity',
    detail: '2 minutes ago',
    timestamp: '2 minutes ago',
  },
  {
    icon: <Icon icon="ph:chat-circle" />,
    label: 'Marcus Lee commented on Project Brief',
    detail: null,
    timestamp: '1 hour ago',
  },
  // ...
];

<ActivityTimeline events={events} />

Event shape

Each event is a fixed TimelineEvent: an icon in the dot, a label, an optional detail line, and a pre-formatted timestamp. The first event (or any with isOrigin) gets the brand-colored dot; the rest use a muted dot. ActivityTimeline is a pure display component — format timestamps and compose labels in your data layer before passing them in.

When not to use

• Don't use ActivityTimeline for short lists (≤3 events) — a plain list reads more cleanly without the timeline marker.
• Don't use ActivityTimeline for unstructured comments. A comment thread with replies and reactions is its own pattern; timeline is for atomic events.
• Don't use ActivityTimeline as a feed of unrelated content. Each event should read as one atomic icon + label + timestamp moment in a shared chronology.

Accessibility

• Renders an <ol> with each event as <li> — semantically a chronological list.
• Each event's timestamp uses <time> for proper screen reader announcement.

API

TimelineEvent

interface TimelineEvent {
  icon: ReactNode;          // rendered inside the event dot
  label: string;            // primary line, e.g. "Request submitted"
  detail?: string | null;   // secondary line, e.g. "by Emily Rivera"
  timestamp: string;        // pre-formatted by the consumer
  isOrigin?: boolean;       // brand-colored dot; defaults to the first event
}

Related

• Board — non-chronological grouped alternative
• Table — tabular activity log
• Storybook playground