Timeline

Vertical or horizontal timeline with variant-colored connectors, icon slots, and metadata regions.

<rhx-timeline>

Examples

Order Tracking

March 10, 2026

Order placed

March 12, 2026

Payment confirmed

March 14, 2026

Shipped

Pending

Delivered

<rhx-timeline>
    <rhx-timeline-item rhx-variant="success" rhx-label="March 10, 2026">
        Order placed
    </rhx-timeline-item>
    <rhx-timeline-item rhx-variant="success" rhx-label="March 12, 2026">
        Payment confirmed
    </rhx-timeline-item>
    <rhx-timeline-item rhx-variant="brand" rhx-label="March 14, 2026" rhx-active="true">
        Shipped
    </rhx-timeline-item>
    <rhx-timeline-item rhx-label="Pending">
        Delivered
    </rhx-timeline-item>
</rhx-timeline>

Variants

Completed

In Progress

Review Needed

Failed

<rhx-timeline>
    <rhx-timeline-item rhx-variant="success">Completed</rhx-timeline-item>
    <rhx-timeline-item rhx-variant="brand">In Progress</rhx-timeline-item>
    <rhx-timeline-item rhx-variant="warning">Review Needed</rhx-timeline-item>
    <rhx-timeline-item rhx-variant="danger">Failed</rhx-timeline-item>
</rhx-timeline>

Horizontal Layout

Step 1

Done

Step 2

Active

Step 3

Pending

<rhx-timeline rhx-layout="horizontal">
    <rhx-timeline-item rhx-variant="success" rhx-label="Step 1">Done</rhx-timeline-item>
    <rhx-timeline-item rhx-variant="brand" rhx-label="Step 2" rhx-active="true">Active</rhx-timeline-item>
    <rhx-timeline-item rhx-label="Step 3">Pending</rhx-timeline-item>
</rhx-timeline>

Alternating Layout

9:00 AM

Morning standup

11:30 AM

Code review

2:00 PM

Design review

<rhx-timeline rhx-align="alternate">
    <rhx-timeline-item rhx-variant="brand" rhx-label="9:00 AM">Morning standup</rhx-timeline-item>
    <rhx-timeline-item rhx-variant="success" rhx-label="11:30 AM">Code review</rhx-timeline-item>
    <rhx-timeline-item rhx-variant="warning" rhx-label="2:00 PM">Design review</rhx-timeline-item>
</rhx-timeline>