Timeline

Timeline vertikal / activity feed — komposisi Timeline + TimelineItem dengan marker ber-tone, judul, dan waktu.

import { Timeline, TimelineItem } from "@naraya/ui";

Examples

Activity feed

Pesanan dikonfirmasi09:24
Pembayaran berhasil diverifikasi.
Sedang diproses10:02
Tim gudang menyiapkan barang.
Menunggu kurir11:15
Estimasi pickup 1-2 jam.
Selesai—
Pesanan belum sampai tahap ini.

<Timeline>
  <TimelineItem tone="success" icon={<Check size={14} />} title="Pesanan dikonfirmasi" time="09:24">
    Pembayaran berhasil diverifikasi.
  </TimelineItem>
  <TimelineItem tone="primary" title="Sedang diproses" time="10:02">
    Tim gudang menyiapkan barang.
  </TimelineItem>
</Timeline>

Minimal (dot)

v1.2.0 dirilis3 Jun
v1.1.0 dirilis20 Mei
v1.0.0 dirilis2 Mei

<Timeline>
  <TimelineItem title="v1.2.0 dirilis" time="3 Jun" />
  <TimelineItem title="v1.1.0 dirilis" time="20 Mei" />
</Timeline>

Props

Timeline

Prop	Type	Default	Description
children	`ReactNode`	—	Daftar <TimelineItem>.

TimelineItem

Prop	Type	Default	Description
title	`ReactNode`	—	Judul item.
time	`ReactNode`	—	Stempel waktu (kanan).
icon	`ReactNode`	—	Isi marker. Default: dot ber-tone.
tone	`"primary" \| "info" \| "success" \| "warning" \| "error" \| "neutral"`	`"primary"`	Warna marker.
children	`ReactNode`	—	Deskripsi item.

Tokens Used

--border-subtle

Garis penghubung vertikal

--color-<tone>

Warna marker per tone

--text-main

Judul item

--text-muted

Waktu & deskripsi

Timeline

Examples

Props

Tokens Used

Accessibility

Related