Comment Thread
ProA nested comment display with author avatar, name, timestamp, comment body, reply button, and like action. Supports threaded replies with visual indentation. Used in discussion sections, task comments, and social feeds.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard comment with avatar, author, timestamp, body, and actions. | Use for all top-level comments in a thread. |
| Collapsed |
Usage Guidelines
Do
Use <article> elements with aria-label for each comment.
Don't
Nest replies more than 3 levels deep — flatten beyond that.
Do
Show relative timestamps ("2 hours ago") with a full date in a tooltip.
Don't
Auto-load hundreds of comments — use pagination or "Load more".
Do
Indent replies visually to show the parent-child relationship.
Don't
Strip markdown or formatting from comment bodies without warning.
Do
Include reply and like actions for each comment.
Don't
Code
Design Tokens
Accessibility
- Each comment uses <article> with aria-label including the author and timestamp.
- Reply and Like buttons have descriptive labels — "Reply to Alice", "Like Alice's comment".
- Nested replies are visually indented and semantically nested within the parent article.
- Timestamps use <time> with a datetime attribute for machine-readable dates.