ActivityItem

Overview

The ActivityItem component is designed for activity feeds, notification lists, and timeline events. It displays a consistent format with avatar, title, description, timestamp, and optional status indicators.

Props

Variants

Activity Types

Different types add a colored status indicator to convey meaning.

<ActivityItem title="..." type="default" />
<ActivityItem title="..." type="success" />
<ActivityItem title="..." type="warning" />
<ActivityItem title="..." type="error" />
<ActivityItem title="..." type="info" />

Examples

Basic Activity

<ActivityItem
  title="Task completed"
  timestamp="Just now"
/>

With Avatar

<ActivityItem
  avatar={<Avatar name="Emily Chen" size="sm" />}
  title="Emily Chen"
  description="Scheduled a follow-up appointment"
  timestamp="30 minutes ago"
/>

Unread Notification

The unread prop highlights the item with a subtle background.

<ActivityItem
  title="New message received"
  description="You have 3 unread messages"
  unread
  type="info"
/>

With Action Button

<ActivityItem
  title="Approval required"
  description="Dr. Johnson requested access"
  timestamp="1 hour ago"
  type="warning"
  action={<Button size="sm" role="secondary" label="Review" />}
/>

Activity Feed

Multiple ActivityItems stacked create an activity feed.

Accessibility

• Semantic Structure: Each activity item uses appropriate heading hierarchy and descriptive text.
• Unread Indication: Unread status is conveyed visually with a distinct background color.
• Status Colors: Status type colors are supplemented by positioning to not rely solely on color.
• Action Accessibility: Action buttons within items are fully keyboard accessible.

Best Practices

• Use meaningful titles that describe the activity
• Provide relative timestamps for recent activity (e.g., "2 hours ago")
• Use status types consistently across your application
• Keep descriptions concise and scannable