Timeline
An ordered list of events, each with a marker joined to the next by a rail
<div class="grid gap-3">
<div class="flex items-baseline justify-between gap-2 text-sm font-semibold">
Booking VT-2481
<span class="text-xs font-normal text-muted-foreground">Kansai in ten days</span>
</div>
<sa-timeline>
<sa-timeline-item title="Booked" description="Online, by Amara Okafor." time="2 Mar, 09:14">
<sa-timeline-item-media><sa-icon name="plus"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Payment received" description="R 48,200 by card ending 4417." time="2 Mar, 09:15">
<sa-timeline-item-media><sa-icon name="credit-card"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Tickets issued" description="Emirates, e-tickets sent to both travellers." time="3 Mar, 11:02">
<sa-timeline-item-media><sa-icon name="ticket"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Pre-departure pack sent" time="Today">
<sa-timeline-item-media><sa-icon name="mail"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Seat changed" description="Kenji Okafor: 32A → 14C." time="Today">
<sa-timeline-item-media><sa-icon name="pencil"/></sa-timeline-item-media>
</sa-timeline-item>
</sa-timeline>
</div>Usage
<sa-timeline>
<sa-timeline-item title="..." description="..." time="..."/>
<sa-timeline-item>
<sa-timeline-item-media>...</sa-timeline-item-media>
<sa-timeline-item-title>...</sa-timeline-item-title>
<sa-timeline-item-time datetime="...">...</sa-timeline-item-time>
<sa-timeline-item-description>...</sa-timeline-item-description>
<sa-timeline-item-actions>...</sa-timeline-item-actions>
...
</sa-timeline-item>
</sa-timeline>A timeline records what happened. It has no status: for steps someone works through, use a checklist.
Examples
Avatars
Put an <sa-avatar> in <sa-timeline-item-media> to show who did what. Use <sa-timeline-item-time> instead of the time attribute to add a machine-readable datetime to the <time> element.
<sa-timeline>
<sa-timeline-item title="Amara Okafor added a traveller" description="Kenji Okafor, adult.">
<sa-timeline-item-media><sa-avatar name="Amara Okafor" size="AvatarSize.Small"/></sa-timeline-item-media>
<sa-timeline-item-time datetime="new DateTimeOffset(2026, 10, 20, 9, 40, 0, TimeSpan.Zero)">5 min ago</sa-timeline-item-time>
</sa-timeline-item>
<sa-timeline-item title="Lindiwe Mokoena changed the hotel" description="Gion Garden Hotel → Ryokan Hanaya.">
<sa-timeline-item-media><sa-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Small"/></sa-timeline-item-media>
<sa-timeline-item-time datetime="new DateTimeOffset(2026, 10, 20, 8, 45, 0, TimeSpan.Zero)">1 h ago</sa-timeline-item-time>
</sa-timeline-item>
<sa-timeline-item title="Voyager sent the payment receipt">
<sa-timeline-item-media><sa-avatar initials="VT" size="AvatarSize.Small"/></sa-timeline-item-media>
<sa-timeline-item-time datetime="new DateTimeOffset(2026, 3, 2, 9, 15, 0, TimeSpan.Zero)">2 Mar</sa-timeline-item-time>
</sa-timeline-item>
<sa-timeline-item title="Amara Okafor created the booking">
<sa-timeline-item-media><sa-avatar name="Amara Okafor" size="AvatarSize.Small"/></sa-timeline-item-media>
<sa-timeline-item-time datetime="new DateTimeOffset(2026, 3, 2, 9, 14, 0, TimeSpan.Zero)">2 Mar</sa-timeline-item-time>
</sa-timeline-item>
</sa-timeline>Expandable details
Anything in an item other than its parts lays out under the text. Combine a button in <sa-timeline-item-actions> with an <sa-collapsible> to show details on request.
<sa-timeline>
<sa-timeline-item title="Price changed" description="By Lindiwe Mokoena." time="Today 10:02">
<sa-timeline-item-media><sa-icon name="pencil"/></sa-timeline-item-media>
<sa-timeline-item-actions>
<sa-button variant="ButtonVariant.Ghost" size="ButtonSize.Small" commandfor="change-81" command="--toggle">
Changes
<sa-icon name="chevron-down" class="transition-transform in-aria-expanded:rotate-180"/>
</sa-button>
</sa-timeline-item-actions>
<sa-collapsible id="change-81">
<dl class="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 rounded-md bg-muted p-3 text-xs">
<dt class="text-muted-foreground">Price per person</dt>
<dd><del class="text-destructive">¥178,000</del> → ¥186,000</dd>
<dt class="text-muted-foreground">Single supplement</dt>
<dd><del class="text-destructive">¥24,000</del> → ¥28,000</dd>
</dl>
</sa-collapsible>
</sa-timeline-item>
<sa-timeline-item title="Day added" description="By Amara Okafor." time="Yesterday">
<sa-timeline-item-media><sa-icon name="plus"/></sa-timeline-item-media>
<sa-timeline-item-actions>
<sa-button variant="ButtonVariant.Ghost" size="ButtonSize.Small" commandfor="change-80" command="--toggle">
Changes
<sa-icon name="chevron-down" class="transition-transform in-aria-expanded:rotate-180"/>
</sa-button>
</sa-timeline-item-actions>
<sa-collapsible id="change-80" hidden="">
<dl class="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 rounded-md bg-muted p-3 text-xs">
<dt class="text-muted-foreground">Day 6</dt>
<dd>Nishiki Market food tour</dd>
</dl>
</sa-collapsible>
</sa-timeline-item>
<sa-timeline-item title="Photo removed" description="By Amara Okafor." time="3 Mar">
<sa-timeline-item-media><sa-icon name="trash"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Tour created" description="By Amara Okafor." time="2 Mar">
<sa-timeline-item-media><sa-icon name="plus"/></sa-timeline-item-media>
</sa-timeline-item>
</sa-timeline>Time in a gutter
Set time-placement to TimelineTimePlacement.Start to show the times in a column before the markers. The column is as wide as the longest time, so the times line up.
<sa-timeline time-placement="TimelineTimePlacement.Start">
<sa-timeline-item title="Arrive at Kansai International" description="EK 316, terminal 1. Pick up the ICOCA cards." time="Day 1">
<sa-timeline-item-media><sa-icon name="plane"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Haruka express to Kyoto" description="75 minutes; reserved seats." time="Day 1">
<sa-timeline-item-media><sa-icon name="train-front"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Ryokan Hanaya, Gion" description="Three nights." time="Day 1–3">
<sa-timeline-item-media><sa-icon name="bed"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Kumano Kodo day hike" description="Optional; book by Day 3." time="Day 5">
<sa-timeline-item-media><sa-icon name="mountain"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Nishiki Market food tour" description="Meet at the Teramachi entrance, 10:00." time="Day 6">
<sa-timeline-item-media><sa-icon name="utensils"/></sa-timeline-item-media>
</sa-timeline-item>
</sa-timeline>Numbered
Set marker to TimelineMarker.Number to number the items that have no media, such as for a set of instructions.
<div class="grid gap-3">
<div class="text-sm font-semibold">Self check-in at Ryokan Hanaya</div>
<sa-timeline marker="TimelineMarker.Number">
<sa-timeline-item title="Collect the key code" description="Sent by SMS at 14:00 on the day you arrive."/>
<sa-timeline-item title="Open the lockbox by the side gate" description="The gate is on Hanamikoji-dori, left of the noren."/>
<sa-timeline-item title="Leave your shoes in the genkan" description="Slippers are on the rack by the step."/>
<sa-timeline-item title="Find your room on the first floor" description="Room 3, Sakura. Tea is ready on the table."/>
</sa-timeline>
</div>Card
A small timeline in a card. Set size to TimelineSize.Small for compact markers and spacing.
<sa-card size="CardSize.Small">
<sa-card-header>
<sa-card-title>Recent changes</sa-card-title>
<sa-card-description>Across all bookings</sa-card-description>
</sa-card-header>
<sa-card-content>
<sa-timeline size="TimelineSize.Small">
<sa-timeline-item title="VT-2481: seat change requested" time="10:02"/>
<sa-timeline-item title="VT-2479: traveller added" time="09:40"/>
<sa-timeline-item title="VT-2466: hotel changed" time="Yesterday"/>
<sa-timeline-item title="VT-2481: booking created" time="2 Mar"/>
</sa-timeline>
</sa-card-content>
<sa-card-footer>
<sa-button-link variant="ButtonVariant.Link" size="ButtonSize.Small" href="#" class="px-0">View all activity</sa-button-link>
</sa-card-footer>
</sa-card>Failure
Colour an icon with a class to flag an event. When the icon adds meaning the title doesn't carry, set label on <sa-timeline-item-media>: screen readers announce it before the title, here "Failed: Payout to the traveller".
<div class="grid gap-3">
<div class="flex items-baseline justify-between gap-2 text-sm font-semibold">
Refund RF-118
<span class="text-xs font-normal text-muted-foreground">R 12,400</span>
</div>
<sa-timeline>
<sa-timeline-item title="Refund requested" description="Flight cancelled by the airline." time="9 Mar">
<sa-timeline-item-media><sa-icon name="undo-2"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Approved" description="By Lindiwe Mokoena." time="10 Mar">
<sa-timeline-item-media label="Approved">
<sa-icon name="check" class="text-[var(--sa-color-success)]"/>
</sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Payout to the traveller" description="The card ending 4417 has expired." time="11 Mar">
<sa-timeline-item-media label="Failed">
<sa-icon name="circle-x" class="text-destructive"/>
</sa-timeline-item-media>
<sa-timeline-item-actions>
<sa-button size="ButtonSize.Small">Retry</sa-button>
</sa-timeline-item-actions>
</sa-timeline-item>
</sa-timeline>
</div>An attribute and its own child part can't be used together: an item with both title and an <sa-timeline-item-title>, time and an <sa-timeline-item-time>, or description and an <sa-timeline-item-description> throws an exception.
Comments
Put a comment's body in the item, under the text. Set muted on <sa-timeline-item-title> to quiet system events.
<sa-timeline>
<sa-timeline-item title="Kenji Tanaka commented" time="2 h ago">
<sa-timeline-item-media><sa-avatar name="Kenji Tanaka" size="AvatarSize.Small"/></sa-timeline-item-media>
<div class="rounded-lg border p-3 text-sm">Can we move the Kumano Kodo hike to Day 4? My knee needs the rest day first.</div>
</sa-timeline-item>
<sa-timeline-item time="1 h ago">
<sa-timeline-item-title muted="true">Status changed to <strong>Waiting on supplier</strong></sa-timeline-item-title>
</sa-timeline-item>
<sa-timeline-item title="Lindiwe Mokoena commented" time="40 min ago">
<sa-timeline-item-media><sa-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Small"/></sa-timeline-item-media>
<div class="rounded-lg border p-3 text-sm">Asked Kii Tours; they'll confirm by tomorrow.</div>
</sa-timeline-item>
<sa-timeline-item time="40 min ago">
<sa-timeline-item-title muted="true">Assigned to Lindiwe Mokoena</sa-timeline-item-title>
</sa-timeline-item>
</sa-timeline>Groups
Split a long feed into several timelines with ordinary headings between them.
<div class="grid gap-3">
<h3 class="text-xs font-semibold tracking-wide text-muted-foreground uppercase">Today</h3>
<sa-timeline>
<sa-timeline-item title="Seat change requested" description="VT-2481, Kenji Okafor: 32A → 14C." time="10:02"/>
<sa-timeline-item title="Traveller added" description="VT-2479, Mia Laurent." time="09:40"/>
</sa-timeline>
<h3 class="mt-3 text-xs font-semibold tracking-wide text-muted-foreground uppercase">Yesterday</h3>
<sa-timeline>
<sa-timeline-item title="Hotel changed" description="VT-2466: Gion Garden Hotel → Ryokan Hanaya." time="16:21"/>
<sa-timeline-item title="Refund approved" description="RF-118, R 12,400." time="11:05"/>
</sa-timeline>
<div class="mt-2">
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">Show earlier activity</sa-button>
</div>
</div>Markers
An item with no media shows the timeline's marker. Media holds an icon on a disc, coloured if the icon has a colour class, or an avatar that fills the marker.
<sa-timeline>
<sa-timeline-item title="No media" description="A plain event: a dot."/>
<sa-timeline-item title="An icon" description="On a sunken disc, in the muted ink.">
<sa-timeline-item-media><sa-icon name="mail"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="A coloured icon with a label" description="The label is read before the title.">
<sa-timeline-item-media label="Needs attention">
<sa-icon name="triangle-alert" class="text-[var(--sa-color-warning)]"/>
</sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="An avatar" description="Fills the marker.">
<sa-timeline-item-media><sa-avatar name="Amara Okafor" size="AvatarSize.Small"/></sa-timeline-item-media>
</sa-timeline-item>
</sa-timeline>Progress
Set current on an item to show how far along the timeline is. The current item, the items before it and the rails between them take the accent colour, and the current item gets aria-current="step". With several current items, the accent runs to the last of them. Set rail to TimelineRail.Dashed for the line out of an optional item, or to TimelineRail.None to break the line.
<div class="grid gap-3">
<div class="flex items-baseline justify-between gap-2 text-sm font-semibold">
Kansai in ten days
<span class="text-xs font-normal text-muted-foreground">Day 2 of 10</span>
</div>
<sa-timeline time-placement="TimelineTimePlacement.Start">
<sa-timeline-item title="Arrive at Kansai International" time="Day 1">
<sa-timeline-item-media><sa-icon name="plane"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Haruka express to Kyoto" time="Day 1">
<sa-timeline-item-media><sa-icon name="train-front"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Ryokan Hanaya, Gion" description="You are here. Check-out is at 10:00 on Day 4." time="Day 1–3" current="true">
<sa-timeline-item-media><sa-icon name="bed"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Kumano Kodo day hike" description="Optional; book by Day 3." time="Day 5" rail="TimelineRail.Dashed">
<sa-timeline-item-media><sa-icon name="mountain"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Nishiki Market food tour" time="Day 6" rail="TimelineRail.None">
<sa-timeline-item-media><sa-icon name="utensils"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Fly home" description="EK 317, 23:45." time="Day 10">
<sa-timeline-item-media><sa-icon name="plane"/></sa-timeline-item-media>
</sa-timeline-item>
</sa-timeline>
</div>Marker styles
marker sets what an item with no media shows: TimelineMarker.Dot (the default), TimelineMarker.Ring or TimelineMarker.Number.
<sa-timeline>
<sa-timeline-item title="Booked" time="2 Mar"/>
<sa-timeline-item title="Payment received" time="2 Mar"/>
<sa-timeline-item title="Tickets issued" time="3 Mar"/>
</sa-timeline>
<sa-timeline marker="TimelineMarker.Ring">
<sa-timeline-item title="Booked" time="2 Mar"/>
<sa-timeline-item title="Payment received" time="2 Mar"/>
<sa-timeline-item title="Tickets issued" time="3 Mar"/>
</sa-timeline>
<sa-timeline marker="TimelineMarker.Number">
<sa-timeline-item title="Booked" time="2 Mar"/>
<sa-timeline-item title="Payment received" time="2 Mar"/>
<sa-timeline-item title="Tickets issued" time="3 Mar"/>
</sa-timeline>Media styles
media-style sets how an icon in <sa-timeline-item-media> is drawn: on a disc (TimelineMediaStyle.Disc, the default), on its own (TimelineMediaStyle.Plain) or in a ring (TimelineMediaStyle.Ring). Avatars are unaffected.
<sa-timeline>
<sa-timeline-item title="Booked" time="2 Mar">
<sa-timeline-item-media><sa-icon name="plus"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Payment received" time="2 Mar">
<sa-timeline-item-media><sa-icon name="credit-card"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Tickets issued" time="3 Mar">
<sa-timeline-item-media><sa-icon name="ticket"/></sa-timeline-item-media>
</sa-timeline-item>
</sa-timeline>
<sa-timeline media-style="TimelineMediaStyle.Plain">
<sa-timeline-item title="Booked" time="2 Mar">
<sa-timeline-item-media><sa-icon name="plus"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Payment received" time="2 Mar">
<sa-timeline-item-media><sa-icon name="credit-card"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Tickets issued" time="3 Mar">
<sa-timeline-item-media><sa-icon name="ticket"/></sa-timeline-item-media>
</sa-timeline-item>
</sa-timeline>
<sa-timeline media-style="TimelineMediaStyle.Ring">
<sa-timeline-item title="Booked" time="2 Mar">
<sa-timeline-item-media><sa-icon name="plus"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Payment received" time="2 Mar">
<sa-timeline-item-media><sa-icon name="credit-card"/></sa-timeline-item-media>
</sa-timeline-item>
<sa-timeline-item title="Tickets issued" time="3 Mar">
<sa-timeline-item-media><sa-icon name="ticket"/></sa-timeline-item-media>
</sa-timeline-item>
</sa-timeline>Time placement
time-placement puts the time at the end of the title row (TimelineTimePlacement.End, the default), under the title (TimelineTimePlacement.Below), or in a column before the markers (TimelineTimePlacement.Start).
<sa-timeline>
<sa-timeline-item title="Booked" description="Online, by Amara Okafor." time="2 Mar, 09:14"/>
<sa-timeline-item title="Payment received" description="R 48,200 by card ending 4417." time="2 Mar, 09:15"/>
<sa-timeline-item title="Tickets issued" description="Emirates, e-tickets sent to both travellers." time="3 Mar, 11:02"/>
</sa-timeline>
<sa-timeline time-placement="TimelineTimePlacement.Below">
<sa-timeline-item title="Booked" description="Online, by Amara Okafor." time="2 Mar, 09:14"/>
<sa-timeline-item title="Payment received" description="R 48,200 by card ending 4417." time="2 Mar, 09:15"/>
<sa-timeline-item title="Tickets issued" description="Emirates, e-tickets sent to both travellers." time="3 Mar, 11:02"/>
</sa-timeline>
<sa-timeline time-placement="TimelineTimePlacement.Start">
<sa-timeline-item title="Booked" description="Online, by Amara Okafor." time="2 Mar"/>
<sa-timeline-item title="Payment received" description="R 48,200 by card ending 4417." time="2 Mar"/>
<sa-timeline-item title="Tickets issued" description="Emirates, e-tickets sent to both travellers." time="3 Mar"/>
</sa-timeline>API Reference
<sa-timeline>
Renders an <ol> element with role="list", forwarding any global attributes.
Prop
Type
<sa-timeline-item>
Renders an <li> element for an event in the timeline, forwarding any global attributes.
Prop
Type
<sa-timeline-item-media>
Renders a <span> element in place of the item's marker, holding an icon or avatar, forwarding any global attributes.
Prop
Type
<sa-timeline-item-title>
Renders a <div> element for the item title, forwarding any global attributes.
Prop
Type
<sa-timeline-item-time>
Renders a <time> element for the item time, forwarding any global attributes. Put the display text inside it.
Prop
Type
<sa-timeline-item-description>
Renders a <p> element for the item description, forwarding any global attributes.
<sa-timeline-item-actions>
Renders a <div> element at the end of the title row that holds buttons or other trailing content, forwarding any global attributes.