UI components · Social
Comment
Also called: Comments, Comment section, Replies, Discussion thread
What people leave under an article, product, or post. Each comment has an avatar, name, time, text, and Reply and Like actions, can have nested replies, and there's a box at the top to write a new one.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstAdd a comment section at the bottom of the article. At the top, a title "128 comments" with a "Top / Newest" toggle on the right. Below that, the writing area: the current user's 32px avatar on the left and a 3-line textarea on the right with the placeholder "Share your thoughts…". Show a "Post" button once it's focused, disabled while the box is empty. For each comment in the list: a 36px avatar on the left; on the right, the first line has the name (14px bold), an "Author" tag if the article's author wrote it, and a gray relative time like "3 hours ago"; the second line is the text at 14px with 1.7 line height; the third line has gray "Reply" and "👍 12" plus a "⋯" menu (Report, Delete) that appears on hover. Indent replies 48px under their parent comment, nest only one level, and collapse anything past 3 replies into "Show 8 more replies." Load 20 at a time with "Load more" at the bottom. Escape user content before rendering it.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Comment is what you need.
Use Comment when
- Under blog posts, videos, and community threads, so readers can share thoughts and reply to each other
- User reviews on product pages, with ratings and photos
- Team discussions on docs, designs, or task details
Pick something else when
A real-time back-and-forth between two people. Use chat bubbles.
Use insteadChat BubbleCollecting user feedback that doesn't need to be public. Use a feedback form.
Use insteadFormRecording system activity (who changed what and when)
Use insteadTimeline
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Replies nest without limit, so the indent keeps growing and a fifth-level reply is a narrow strip
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Comments have only text, with no time, Reply, or Like, so you can't tell the order or keep the discussion going
- 03
User content is rendered as raw HTML without escaping, which opens an XSS hole
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A section title (count and sorting), a box for writing a comment, and the list of comments. Each comment has an avatar, name, time, text, and Reply / Like / More actions, with replies indented below.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
Comments show up at the bottom of blog posts, videos, product pages, community threads, and docs. A comment section usually has three parts. At the top, a "128 comments" title with "Top / Newest" sorting. Then a box to write a comment. Then the comments themselves. Each comment has an avatar on the left. To its right, the first line has the name, a role tag like "Author," and "3 hours ago," the second line is the text, and the last line has "Reply," "Like 12," and a "⋯" menu. Replies to a comment are indented beneath it (nested replies), and when there are many, they collapse into "Show 8 more replies."
How it differs from a Chat Bubble: comments are a public discussion around one piece of content, all lined up on the left in one column and sorted by time or popularity. A chat is a back-and-forth, split left and right, with new messages at the bottom. How it differs from a Feed: every item in a feed is its own piece of content, while comments hang off the content above them. Product reviews are just comments with Rate stars and photos, and the structure is the same.
Nest replies two levels at most. Deeper replies should go flat as "Reply to @name," or the indent keeps shrinking the column. When there are many comments, paginate or use "Load more" instead of rendering them all at once. A newly posted comment should appear in the list right away (it can be marked "Pending review"), and Delete and Report go into the "⋯" menu. Escape user content before displaying it to prevent XSS, and add rel="nofollow" to links in comments.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-comment- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-comment.arco-comment.t-comment#disqus_thread.giscus.utterances.tk-comment.atk-comment
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
commentcommentscomment-itemcomment-cardcomment-listcomment-sectioncomment-threadcomment-boxreply-itemreplies
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
CommentCommentItemCommentListCommentSectionCommentThreadComments
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
starts with mediarepeated items
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026