ITimeline ​

A vertical run of events in order — an audit trail, a delivery's progress, a document's history.

<script setup lang="ts">
const events = [
  { title: 'Invoice created', time: '09:12', datetime: '2026-08-22T09:12:00Z' },
  { title: 'Sent to client', time: '09:20', description: 'Delivered to the billing contact.' },
  { title: 'Viewed', time: '11:47' },
  { title: 'Paid', time: '14:03', variant: 'success', description: 'Card ending 4021.' },
]
</script>

<template>
  <ITimeline :items="events" />
</template>

Not a stepper ​

A timeline is a record of what already happened. For a process the reader is moving through, with a current position and steps still to come, use IStepper.

Icons ​

An icon turns the dot into a larger ringed circle, tinted to match the variant.

<ITimeline
  :items="[
    { title: 'Invoice created', time: '09:12', icon: InvoiceIcon },
    { title: 'Payment failed', time: '13:02', icon: AlertIcon, variant: 'danger' },
    { title: 'Paid', time: '14:03', icon: CheckIcon, variant: 'success' },
  ]"
/>

Variants ​

neutral, primary, success, warning, danger and info. Set one on the timeline for the default and override it per item. Keep the meaning in the title as well, so it survives without the colour.

Time ​

time is rendered exactly as given, so format it where you know the reader's locale. Add datetime — an ISO string — and it becomes a machine-readable <time> element.

const paid = {
  title: 'Paid',
  time: '14:03', //                      what the reader sees
  datetime: '2026-08-22T14:03:00Z', //   what a machine reads
}

Sizes ​

<ITimeline :items="events" size="sm" />
<ITimeline :items="events" size="md" />

Props ​

TimelineItem ​

Slots ​

Accessibility ​

The events render as an ordered list, so a screen reader announces how many there are and where it is in them. The connecting spine is drawn per item, and the last item omits it.