Changelog Entry
ProA structured component for displaying version history entries with a date, version number, category badge, and a description list of changes. Used for product changelogs, release notes pages, and update feeds to communicate what has changed across versions.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard changelog entry with date, version, and bulleted changes. | Use for chronological release notes and product update pages. |
| Compact | Single-line summary format for dense changelog feeds. | Use for sidebar changelogs and notification feeds. |
Usage Guidelines
Do
Order entries newest-first for chronological scanning.
Don't
Mix different date formats within the same changelog.
Do
Use consistent category labels: Added, Changed, Fixed, Removed.
Don't
Include internal jargon — write changes in user-facing language.
Do
Include the date and version number on every entry.
Don't
Group too many changes under a single version — break large releases into sections.
Code
Design Tokens
Accessibility
- Use <time> element with datetime attribute for machine-readable dates.
- Use <article> for each entry so screen readers can navigate between them.
- Category badges should have descriptive text, not just colour differentiation.