All Patterns /
Status /
Status Timeline
Status Timeline
Displays a chronological timeline of events related to a case, application, or request so users can track progress and understand what has happened and what comes next.
Usage Notes
When to use
Use the Status Timeline pattern when users need to track the progress of a case, application, or request over time. It is ideal for multi-step processes where events occur on different dates and users need to understand the current state, what has already happened, and what is expected next.
Accessibility considerations
The timeline is rendered as a semantic ordered list for screen reader navigation. Each event includes its status (complete, current, or pending) as visually hidden text so screen readers announce it. The visual dots and connecting lines are purely decorative and hidden from the accessibility tree with aria-hidden. The pulsing animation on the current event respects reduced-motion preferences via CSS.
NYSDS components used
nys-badge, nys-divider
Customization points
Agencies can adjust the number and content of timeline events, customize the case header information, change the badge status intent, and modify the timeline colors via the NYSDS design tokens (--nys-color-success, --nys-color-theme, --nys-color-base). The timeline component can be reused independently by importing the Timeline class.