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.

#Layout

Each event leads with its title and description, followed by a compact actor avatar and timestamp. Quiet dividers separate events; the feed has no extra outer panel or decorative connector. Only the first marker receives full tone emphasis. Metadata wraps on narrow screens, and long titles and descriptions stay within the list. Rows are informational and do not imply click or hover actions.

#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.