Agentic BP DScode-first design system

Timeline

What happened on a record, newest first: a circled icon per entry joined by a line, with the note, links and action for each one.

Master

Switch the entries and the size. The line joins the entries and stops at the last one. Each entry can carry notes, links, one action and a More menu.

  1. 2 hours ago

    Call with Maya Chen

    Logged by Ana Petrovic

    Walked through the March overage. Maya will send the usage export so we can rebill the metered lines before the run.

    INV-1042Acme Inc.
  2. Yesterday, 16:20

    Invoice sent

    Billing run 2027-03

    INV-1042 for $36,420 went out to billing@acme.com.

    View invoice
  3. 8 Jan 2027, 09:05

    Note added

    Ana Petrovic

    Account moved to net 45 terms for the rest of the year.

Usage

Use Timeline for the activity on a record: calls, emails, notes, status changes, an audit trail. It is one component: pass items as data. Each item has a title, and optional timestamp, subtitle, icon, intent, notes, links and one action, plus a More menu of kit Dropdown entries. The line joins the entries and stops at the last one. Keep the order you want to show, usually newest first. For steps in a flow, use Steps. For a list of records, use Table. See contracts/timeline.json for the full contract.

Do's

  • The activity on a record: calls, emails, notes, status changes.
  • An audit trail of what changed and when.
  • A history panel in a Drawer beside a record.

Don'ts

  • Do not build a feed from your own divs, or add a TimelineItem, ActivityCard or FeedRow. Pass items.
  • Do not use it for steps in a flow. Use Steps.
  • Do not use it for a list of records people sort and filter. Use Table.
  • Do not put more than one action on an entry; extra ones go in the More menu.
  • Do not use raw hex.
<Timeline
  size="md"
/>