Application status

Shows a supplied case reference, status, update time, milestones, and next step without estimating progress.

Preview

Community grant application

Example 204

Under review

Updated 14 September, as supplied

Application received
Recorded12 September
Evidence review
In progressDate not supplied
Decision
Not issuedDate not supplied

Next step

Wait for the review update

In action

Follow your case

A fictional case timeline. Dates, steps, and status come from the supplied case record.

Community grant application

Example 204

Under review

Updated 14 September 2026, 10:00 UTC+02:00

Application received
Recorded12 September
Evidence review
In progressSince 14 September
Decision
Not issuedDate not supplied

Next step

Wait for the review update

When to use

Use it for

Permit, benefits, tax, and grant cases with supplied status and milestones.
Supply the current milestone explicitly, preserve source milestone order, and use nextStep for the authority’s actual instruction.

Not for

Predicting approval, calculating completion percentages, or choosing the current step from dates.
Presenting estimated service times as confirmed decision dates.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { ApplicationStatus } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/application-status.

2. Vendor the source

npx @noorddev/vlak-cli add application-status

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/application-status.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { ApplicationStatus } from "@noorddev/vlak-react";

<ApplicationStatus applicationTitle="Community grant application" reference="Example 204" status="Under review" updatedLabel="Updated 14 September, as supplied" milestones={[{ id: "received", label: "Application received", status: "Recorded", dateLabel: "12 September" }, { id: "review", label: "Evidence review", status: "In progress", current: true }]} nextStep="Wait for the review update" />

Props

ApplicationStatus

A case reference, explicit decision status, and supplied milestones with no inferred progress.

Prop	Type	Default
`applicationTitle`required	`string`
`reference`	`ReactNode`
`status`required	`ReactNode`
`statusDetail`	`ReactNode`
`updatedLabel`	`ReactNode`
`milestones`required	`readonly ApplicationMilestone[]`
`nextStep`	`ReactNode`
`milestonesEmptyLabel`	`ReactNode`	`"Application milestones not supplied"`

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab, Enter, Space`	Any supplied child links or buttons keep their native keyboard behavior. Milestones are not interactive.

Accessibility

An ordered, named list preserves milestone order. Explicit current milestones use aria-current=step and a full-surface fill.
Status and dates are readable text. Optional machine-readable milestone dates are passed through without conversion.
Missing reference, update time, milestone dates, milestones, and next step have explicit descriptions.
The root forwards native div attributes and its ref. Use at least 44px targets for supplied actions.

Markup

<div class="rs-application-status" role="group" aria-label="Community grant application"><div class="rs-application-status-header"><p class="rs-application-status-title">Community grant application</p><span class="rs-application-status-reference">Example 204</span></div><div class="rs-application-status-overview"><p class="rs-application-status-status">Under review</p><p class="rs-application-status-detail">Updated 14 September, as supplied</p></div><ol class="rs-application-status-milestones" aria-label="Application milestones"><li class="rs-application-status-milestone rs-application-status-current" aria-current="step"><span class="rs-application-status-milestone-label">Evidence review</span><span class="rs-application-status-milestone-meta">In progress</span></li></ol><div class="rs-application-status-next"><p class="rs-application-status-next-label">Next step</p><div>Wait for the review update</div></div></div>

Classes

.rs-application-status.rs-application-status-header.rs-application-status-title.rs-application-status-reference.rs-application-status-overview.rs-application-status-status.rs-application-status-detail.rs-application-status-milestones.rs-application-status-milestone.rs-application-status-current.rs-application-status-milestone-label.rs-application-status-milestone-meta.rs-application-status-next.rs-application-status-next-label.rs-application-status-actions