Activity Feed
ProA reverse-chronological stream of user and system events, displaying who did what and when. Each entry includes an avatar, actor name, action description, timestamp, and optional rich content. Used for project dashboards, audit logs, and notification feeds.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard activity feed with avatar, action text, and timestamp per entry. | Use for project dashboards, team activity views, and audit trails. |
| Compact |
Usage Guidelines
Do
Show relative timestamps ("2 hours ago") with a tooltip for absolute time.
Don't
Auto-refresh the feed without warning — new entries can shift content under the cursor.
Do
Group rapid successive events from the same actor to reduce noise.
Don't
Display raw system events without human-readable descriptions.
Do
Use "Load more" pagination rather than infinite scroll for better performance.
Don't
Auto-scroll to new events while the user is reading older ones.
Code
Design Tokens
Accessibility
- Use role="feed" on the container to indicate a dynamic, scrollable list of articles.
- Each entry should be an <article> with aria-labelledby pointing to the actor and action.
- New entries added via real-time updates must be announced by an aria-live="polite" region.
- Infinite scroll must not trap keyboard focus — provide a "Load more" button as a fallback.
- Timestamps should be wrapped in a <time> element with a datetime attribute.