Timeline

The default Timeline renders with center alignment and status-based icon styling. Each TimelineItem includes an IconContent slot with a TimelineIcon, and a content area with TimelineHeader, TimelineTitle, TimelineTime, and TimelineDescription sub-components.

Set Align to TimelineAlign.Left to position all content to the right of the icon column. This layout is ideal for git commit histories, activity logs, or any timeline where content consistently flows in one direction.

Use TimelineAlign.Alternate to position items on alternating sides of the icon column. This creates a balanced, visually interesting layout that works well for project roadmaps, milestone overviews, or company history pages.

Set Align to TimelineAlign.Right to position the icon column on the right side with content flowing to the left. This layout works well for right-to-left reading patterns or when you want the icons to serve as visual markers along the right edge.

Customize the connector line between items using the ConnectorStyle parameter. Choose from Solid (default, continuous line), Dashed (intermittent segments for less emphasis), and Dotted (fine dots for pending or uncertain connections).

Set ConnectorFit to TimelineConnectorFit.Connected on the Timeline container to make the connector lines touch each icon directly with no gap. The default Spaced mode adds a ring around each icon that creates visual separation, while Connected removes it for a seamless vertical line.

Use IconVariant to switch between Solid (filled background with contrasting icon color) and Outline (border-only with transparent background). Combine with IconColor options like Primary, Secondary, or Destructive for semantic meaning.

Control the overall timeline scale with the Size parameter on the Timeline container and IconSize on individual items. Available sizes are Small (compact logs), Medium (default), and Large (prominent displays).

The connector line automatically adjusts its height to match the content block. When an item has a tall content area, the line stretches to fill the vertical space between icons, keeping the timeline visually connected regardless of content size.

Set Loading to true on a TimelineItem to show a subtle pulse animation indicating that the step is actively processing. Combine with an animated spinner icon in the IconContent for a polished loading experience.

Set IsCollapsible to true and provide a DetailContent render fragment to create expandable timeline items. Use DefaultOpen to control the initial expand state. This is useful for build logs, deployment histories, or audit trails where details can be revealed on demand.

Combine IsCollapsible with large detail content blocks to create expandable release notes, audit logs, or changelogs. The connector line adjusts dynamically as items expand and collapse, keeping the timeline layout consistent.

Use the TimelineEmpty component inside a Timeline to display a placeholder message when there are no events to show. This provides a graceful fallback for empty activity feeds or unstarted processes.