Badges — Milestone status strip

Three milestone columns pair a status badge with a short title and date beneath a continuous rule. Use to summarize progress across a small sequence.

ReactHTML

1440 × 480

Open in new tab

Component.tsx14 lines

export default function BadgesMilestoneStrip() {
  return (
    <div className="w-72 text-neutral-900 sm:w-[28rem]"><h2 className="text-sm font-semibold">Milestones</h2>
    <ol className="mt-3 grid grid-cols-3" role="list"><li className="border-t border-neutral-200 pt-3 text-center"><span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-900 gap-1 bg-white"><svg className="size-3" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4L19 6" /></svg>Complete</span>
    <p className="mt-2 text-xs font-medium text-neutral-900">First milestone</p>
    <p className="mt-1 text-xs tabular-nums text-neutral-500">Oct 08</p></li>
    <li className="border-t border-neutral-200 pt-3 text-center"><span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-900 gap-1 bg-neutral-900 text-white border-neutral-900">Current</span>
    <p className="mt-2 text-xs font-medium text-neutral-900">Next milestone</p>
    <p className="mt-1 text-xs tabular-nums text-neutral-500">Oct 11</p></li>
    <li className="border-t border-neutral-200 pt-3 text-center"><span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-900 gap-1 bg-white">Pending</span>
    <p className="mt-2 text-xs font-medium text-neutral-900">Final milestone</p>
    <p className="mt-1 text-xs tabular-nums text-neutral-500">Oct 18</p></li></ol></div>
  )
}

Pattern notes

When to use: Use for a short sequence with one current milestone. Choose a status list when item updates are independent. Variations: omit dates, mark all milestones complete, or replace dates with short duration values.
Hierarchy: Scan the milestones from left to right. Each column reads status, title and date. Current uses dark fill and medium text, while Complete adds a check icon. Titles use at most 2 words, statuses one word and dates 6 characters.
Responsive: The three columns remain in one row. The root grows from 288px to 448px at 640px; titles may wrap to two lines on mobile while dates and badges stay compact.
Layout: A 288px root grows to 448px at sm. A 14px heading leads a three-column list by 12px. Each column shares a 1px top rule and 12px top padding, with a centered status pill, 8px title gap and 4px date gap.
States: The strip is informational and has no focusable controls, hover or selected input states. Words and the check icon explain progress without relying on fill alone. Replace the status and date values as the surrounding data changes.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ Milestones                                           │
│ ──────────────────────────────────────────────       │
│ [Complete]         [Current]         [Pending]       │
│ First milestone    Next milestone   Final milestone  │
│ Oct 08             Oct 11           Oct 18           │
└──────────────────────────────────────────────────────┘

View all

Badges — Access badges in a comparison table
Layout tags: table,compact
Badges — Capability badges in a small grid
Layout tags: grid,icons,compact
Badges — Counts and dot indicators
Layout tags: layered,numbers,icons,compact

Badges — Milestone status strip

Pattern notes

More in Badges

Badges — Access badges in a comparison table

Badges — Capability badges in a small grid

Badges — Counts and dot indicators