Diff View
ProA code comparison component for displaying additions, deletions, and modifications between two versions of text. Supports side-by-side (split) and unified (inline) display modes with line numbers and colour-coded change markers. Used for code reviews, version history, and content auditing.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Inline | ||
| Side by Side |
Usage Guidelines
Do
Use green for additions and red for deletions — this is a universal convention.
Don't
Rely only on colour to indicate additions and deletions — use +/- markers too.
Do
Show line numbers for both old and new versions.
Don't
Show diffs for binary files — display a "Binary file changed" message instead.
Do
Allow toggling between unified and split views.
Don't
Auto-expand very large diffs — collapse them with an expand action.
Code
Design Tokens
Accessibility
- Use role="region" with aria-label="Code changes" for the diff container.
- Do not rely solely on colour — include +/- text markers for additions and deletions.
- Line numbers should be aria-hidden to reduce screen reader verbosity.
- Provide a text summary like "3 additions, 1 deletion" for screen readers.