Timeline
A vertical timeline for order history, activity feeds, and audit logs, with color-coded status markers.
Order placedJan 1, 2026
Your order has been placed successfully.
Payment confirmedJan 2, 2026
Payment was received and confirmed.
Delivery delayedJan 4, 2026
Shipment is delayed due to weather conditions.
DeliveredJan 6, 2026
Package delivered to the recipient.
API
All inputs and configuration options for zyra-timeline.
| Prop | Type | Default | Description |
|---|---|---|---|
title (on item) | string | '' | Heading text for the entry |
date (on item) | string | '' | Date or time label shown next to the title |
variant (on item) | 'default' | 'success' | 'warning' | 'danger' | 'info' | 'default' | Color of the entry marker dot |
Tokens
CSS custom properties zyra-timeline reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Default marker--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Marker dot color for the default variant, and the ring around every marker. |
Success marker--zyra-color-success-foreground | var(--zyra-color-success) | Marker dot color for the success variant. |
Warning marker--zyra-color-warning-foreground | var(--zyra-color-warning) | Marker dot color for the warning variant. |
Danger marker--zyra-color-danger-foreground | var(--zyra-color-danger) | Marker dot color for the danger variant. |
Info marker--zyra-color-info-foreground | var(--zyra-color-info) | Marker dot color for the info variant. |
Connecting line--zyra-color-border-color | var(--zyra-color-border) | Color of the vertical line connecting entries. |
Title--zyra-color-foreground | var(--zyra-color-text) | Color of each entry's title. |
Date / body text--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Color of the date label and projected body content. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Rendered as a plain list of entries — wrap in an ordered list context if sequence matters for assistive tech