ComponentsEnterpriseActivityFeed

ActivityFeed

ActivityFeed presents chronological, human-readable collaboration updates.

Actors and actionsDate groupsUnread stateMetadataIncremental loading

Overview

Use ActivityFeed to help people understand recent collaborative changes in the context of a project or workspace.

Project activity

Live preview

Activity

3 updates

  1. Today

  3. Yesterday

ProjectActivity.tsx
tsx
import { ActivityFeed } from 'omverse-ui'
 
const updates = [/* ... */]
 
<ActivityFeed
items={updates}
hasMore={true}
onLoadMore={loadNextPage}
/>

Anatomy

Each update connects an actor, action, subject, supporting detail, time, and unread state.

Today

MCMaya Chen changed the status of Enterprise migrationIn progress → At risk
  1. 1
    Date group

    Segments chronology.

  2. 2
    Actor visual

    Identifies the person or source.

  3. 3
    Activity sentence

    Connects actor, action, and subject.

  4. 4
    Detail and time

    Adds outcome and recency.

  5. 5
    Unread indicator

    Marks unseen updates.

When to use

Choose this component for human-readable collaboration signals and workstream continuity.

Recommended

  • Show collaboration history

    Summarize comments and record changes.

  • Provide contextual recency

    Keep updates beside the affected work.

  • Support progressive history

    Load older activity on demand.

When not to use

Avoid ActivityFeed for compliance evidence or urgent transient alerts.

Avoid

  • Do not use for immutable evidence

    Use AuditLog.

  • Do not use for urgent actions

    Use NotificationCenter or Alert.

  • Do not show conversations

    Use threaded communication UI for chats.

Variants

Surface, size, and chronology controls are configurable.

Plain

Embedded timeline.

Outlined

Bounded feed.

Filled

Tonal feed.

Density

Three item sizes.

States

Read/unread, loading, and empty states are clearly represented.

StateTriggerVisual responseInteraction
ReadPreviously seenStandard rowOpen if actionable
UnreadNew updateTonal row and dotOpen or act via host controls.
LoadingInitial fetchStatusWait
Loading moreOlder page requestedLoad more stateCurrent items remain.
EmptyNo updatesEmpty contentNone

Behavior

Chronology and date grouping stay stable while older entries are appended in order.

Chronology

Newest updates appear first.

Grouping

Repeated dates are grouped for scanning.

Navigation

Item click can open related context.

Pagination

Load more appends older updates.

Accessibility

KeyAction
TabMoves through actionable updates and load-more.
EnterSpaceOpens an actionable update.
  • Use an ordered list for chronology.
  • Write complete activity sentences.
  • Use semantic time with dateTime when known.
  • Expose unread state in text.
  • Announce loading states.

Content guidelines

Keep update language factual and concise for rapid scannability.

Lead with actor

Name who acted first.

ExampleMaya Chen changed

Use action + subject

Keep object language concrete.

Exampleapproved the policy

Add outcome in brief

Include the result or next step.

ExampleIn progress → At risk

Label chronology

Prefer grouped date labels for long feeds.

ExampleYesterday

Examples

Use `ActivityFeed` for collaboration timeline contexts outside formal audit systems.

System activity

Live preview
⚙ Automation updated Renewal forecastYesterday at 4:30 PM · Workflow

Props / API

ActivityFeed extends section attributes.

Props

PropTypeDefaultDescription
itemsreadonly ActivityFeedItem[]requiredChronological updates.
titleReactNode'Activity'Visible feed heading.
loadingbooleanfalseShows initial loading.
emptyStateReactNode'No activity yet'Empty content.
onItemClick(item) => voidundefinedMakes updates actionable.
onLoadMore(...) => voidundefinedLoads older updates.
hasMorebooleanfalseShows load-more control.
loadingMorebooleanfalseShows incremental loading.
variant'plain' | 'outlined' | 'filled''outlined'Surface treatment.
size'sm' | 'md' | 'lg''md'Item density.