Skip to content

Overview

The <x-aura::timeline> component renders a vertical timeline of events. Each item supports an icon, color variant, and date label. The timeline can optionally alternate items left and right for a centered layout.

Basic Usage

Account created.
Profile updated.
First order placed. 
<x-aura::timeline>
    <x-aura::timeline.item>Account created.</x-aura::timeline.item>
    <x-aura::timeline.item>Profile updated.</x-aura::timeline.item>
    <x-aura::timeline.item>First order placed.</x-aura::timeline.item>
</x-aura::timeline>

Props

Timeline

Prop Type Default Description
alternate bool false Alternate items left and right for a centered layout.

Timeline Item

Prop Type Default Description
icon string|null null Icon name displayed in the timeline dot.
color string 'primary' Color variant: primary, success, danger, warning, info, secondary.
date string|null null Date or time label displayed alongside the item.

Variants / Examples

Colored Timeline

Order confirmed.
Shipped via express delivery.
Out for delivery.
Awaiting pickup. 
<x-aura::timeline>
    <x-aura::timeline.item color="success" icon="check">Order confirmed.</x-aura::timeline.item>
    <x-aura::timeline.item color="info" icon="truck">Shipped via express delivery.</x-aura::timeline.item>
    <x-aura::timeline.item color="warning" icon="clock">Out for delivery.</x-aura::timeline.item>
    <x-aura::timeline.item color="secondary" icon="package">Awaiting pickup.</x-aura::timeline.item>
</x-aura::timeline>

With Dates

Project kickoff meeting.
Design phase completed.
Beta release launched.
Critical bug discovered and fixed. 
<x-aura::timeline>
    <x-aura::timeline.item color="primary" date="Jan 15, 2026">Project kickoff meeting.</x-aura::timeline.item>
    <x-aura::timeline.item color="success" date="Feb 01, 2026">Design phase completed.</x-aura::timeline.item>
    <x-aura::timeline.item color="info" date="Mar 10, 2026">Beta release launched.</x-aura::timeline.item>
    <x-aura::timeline.item color="danger" date="Apr 01, 2026">Critical bug discovered and fixed.</x-aura::timeline.item>
</x-aura::timeline>

Alternate Layout

Company founded.
Reached 1,000 customers.
Expanded internationally. 
<x-aura::timeline :alternate="true">
    <x-aura::timeline.item color="primary" icon="star" date="2024">Company founded.</x-aura::timeline.item>
    <x-aura::timeline.item color="success" icon="users" date="2025">Reached 1,000 customers.</x-aura::timeline.item>
    <x-aura::timeline.item color="info" icon="globe" date="2026">Expanded internationally.</x-aura::timeline.item>
</x-aura::timeline>

Accessibility

  • The timeline renders as a semantic list structure for screen readers.
  • Icons are decorative and supplemented by text content.
  • Date labels provide additional context alongside each timeline entry.