Comment

A comment is anything that expresses an opinion, observation, explanation, etc. Examples include user discussion replies, peer review remarks, marginalia, code review notes, and editor annotations.

This headless component renders a <div> with class comment. The consumer supplies the comment body and any related metadata (author, timestamp, action buttons) as children.

Implementation Notes

• Uses <div> element with class comment
• aria-label describes the comment for assistive technology (e.g., "Comment by Jane Doe")
• Contains slots for avatar, author name, timestamp, and body content
• Supports nested replies through recursive composition

Props

• label: string (optional) -- accessible label for the comment
• children: slot (required) -- comment content including avatar, author, time, and body
• ...restProps: Any additional HTML attributes

Usage

<Comment label="Comment by Jane Doe">
  <Avatar>JD</Avatar>
  <span>Jane Doe</span>
  <time datetime="2025-01-15">January 15, 2025</time>
  <p>Great work on this!</p>
</Comment>

Keyboard Interactions

• None -- comments are informational, not interactive

ARIA

• aria-label -- describes the comment for screen readers

When to Use

• Use to display opinions, observations, or explanations from a user or contributor.
• Use when each comment includes author, timestamp, and content.
• Use for threaded reply structures via recursive composition of nested Comment components.

When Not to Use

• Do not use for real-time chat messages -- use ChatMessage instead.
• Do not use for system log entries or event history -- use TimelineList.
• Do not use for system-generated messages or alerts -- use Notification or Alert.

Related components

• question — a question is anything that asks for information, invites a response, tests knowledge, etc.
• answer — an answer is anything that responds to a question, request, action, etc.
• chat-message — a chat message shows one chat conversation message entry
• blockquote — a block-level quotation with optional source citation