Components / Display / HistoryOpen in Figma

History

Ready

A timeline of what happened to a record: who did what, and when.

Platforms Phone · TabletGroup DisplayUpdated 26 Oct 2026

When to use

  • A record changes over time and people need to see who changed it and when.
  • On phone, a record's history sits at the end of its detail screen.

When not to use

If people need toUse
Show the current status onlyStatus label
Show a list of separate recordsList card
Chat or comments about a recordNot covered here; comments live in the Help Desk activity feed

Anatomy

check_circle
Event title AutoName • Date and time
add_circle
CreatedName • Date and time
  1. Event dot · required, tinted by the kind of event
  2. Event icon · required, 20
  3. Title · required: what happened
  4. Tag · optional: marks an event the system did
  5. Meta line · required: who and when
  6. Connector · joins each dot to the one below; none after the last

Variants

VariantPurposeFigma
Several entriesNewest first, joined by the connectorDesigned
One entryOnly "Created"; no connectorDesigned
With tagA small neutral tag after the title for automatic eventsDesigned

States

StateWhenWhat changesFigma
DefaultHistory is loadedAs drawnDesigned
LoadingHistory is still loadingGrey dots and grey blocks where text will beTemporary rule

Behaviour

  • Newest event at the top.
  • Every change keeps an entry: who, when, and old → new when a value changed.
  • Entries are read-only; they never open anything.
  • Dot tints: created in Amber light, positive events in Positive, cancelled or expired in Coral at 10%.

Phone and tablet

PhoneTablet
Where it livesAt the end of the record's detail screenIn the detail panel, under the record

Content

PartRule
TitleWhat happened, past tense, a few words: "Approved", "Site changed"
Meta linePerson • date and time, as "22 Apr 2024 • 09:14 AM"
TagOne word, such as "Auto"

Do and don't

check_circle
Event titleName • Date and time
DoKeep each entry to a title and one meta line.
check_circle
Event titleName • Date and timeStatusA sentence that explains the title again.
Don'tAdd labels or sentences that repeat the title.
Record layoutStatus labelRequest cardIcons
← Status labelStat tile →