ActivityTimeline

ActivityTimeline renders lightweight chronological activity without expand/collapse behavior. Use it when the event summary itself is the content.

#Default usage

<ActivityTimeline
  items={[
    {
      id: "review",
      title: "Review requested",
      actor: "Wandi",
      description: "Requested design and API review for the release.",
      timestamp: "10:30",
      tone: "info",
    },
    {
      id: "approved",
      title: "Approved for publish",
      actor: "FroggDesign",
      description: "All checks passed.",
      timestamp: "11:10",
      tone: "success",
    },
  ]}
/>

#Import

import { ActivityTimeline, ActivityTimelineItem } from "@froggdesign/enter-ui-react";

#Patterns

Use ActivityTimeline for audit logs, activity feeds, account history, release notes, support events, and recent changes panels. Use TimelineDetail when events need expandable details.

#Accessibility

The component renders an ordered list. Tone colors are small accents only; title, actor, description, and timestamp remain text-based.

#API

• items: { id, title, description?, timestamp?, tone?, actor?, avatar? }[].
• ActivityTimelineItem: manual item component for custom composition.
• Supports native ordered-list props and className.

#Styling

ActivityTimeline uses .eui-activity-timeline classes and FroggDesign tokens for layout, state, focus, and disabled styling.