Activity Feed
Last Updated: September 2026Activity feeds show a chronological history of actions, comments, and attachments on a record.
Source CodeAnatomy
link- 1Icon
- 2Subject + action
- 3Content
- 4Connector
- 5Source row
Variants
linkBasic item
Subject, action, and optional source metadata on the timeline.
With comment
Embed ActivityFeed.Comment in the content slot; optional onEdit/onDelete.
File attachment
ActivityFeed.FileAttachment with optional onView and onOpen actions.
Collapsible nested events
collapsible nests child Items behind a Show/Hide events toggle.
Custom icon
Pass icon to replace the default circle on the rail.
Usage Guidelines
linkWhen to use
- •To show a chronological history of actions, comments, and attachments.
- •On patient, encounter, claim, or ticket detail views.
- •When a connector rail helps users follow nested or sequential events.
When not to use
- •For real-time system toasts — use Toast.
- •For static documentation or help copy — use Typography sections.
- •When only the latest status matters — prefer Dot Status or a summary row.
Set showConnector={false} on the last visible item so the rail ends cleanly.
Don't leave the connector on after the final event — it looks unfinished.
Pass onEdit/onDelete only when those actions are available for the comment.
Don't put paragraphs in action — keep action short and put detail in content.
Behaviors
linkCompound API
- •ActivityFeed is the root list container.
- •ActivityFeed.Item requires subject and action; optional icon, user, timestamp, date, content, showConnector, collapsible, defaultExpanded, children.
- •ActivityFeed.Comment and ActivityFeed.FileAttachment are meant for the Item content slot.
Timeline rail
- •showConnector defaults to true and draws the line under the icon.
- •Set showConnector={false} on the last item (or any item that should not continue).
Nesting
- •Pass nested ActivityFeed.Item children to indent related events.
- •With collapsible, children hide behind a Show/Hide events trigger; defaultExpanded sets the initial state.
Content Guidelines
linkSubject and action
- •Subject is the bold actor or entity (person, system, item id).
- •Action is a short past-tense phrase describing what happened.
Timestamps
- •Prefer short display strings like '11:56am' and 'Jun 5th 2026'.
- •Use synthetic names and ids in demos — never real PHI.
Accessibility
linkText & Labels
- •Keep subject + action readable as a sentence when announced in order.
- •File and comment action buttons use IconButton labels from the design system.
ARIA attributes
- •The connector line is aria-hidden.
- •Collapsible uses Base UI Collapsible for expand/collapse of nested events.
Keyboard Support
- •Comment/file IconButtons are keyboard reachable when onEdit, onDelete, onView, or onOpen are provided.
- •Collapsible Show/Hide events trigger is activatable with Enter/Space.
WCAG Compliance Standards
FAQs
linkWhat props does ActivityFeed.Item require?
subject and action. Everything else (icon, user, timestamp, date, content, showConnector, collapsible, children) is optional.
How do I add comment edit/delete?
Pass onEdit and/or onDelete to ActivityFeed.Comment. Omitting them hides those actions.
ActivityFeed vs Toast?
ActivityFeed is a persistent history on a detail view. Toast is ephemeral confirmation — not a log.