Lily Design System™

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.

Example

Jane Doe —

Great work on this!

Show demo markup 
<div class="comment" aria-label="Comment by Jane Doe"><header>Jane Doe — <time>2 hours ago</time></header><p>Great work on this!</p></div>
Usage example 
<Comment label="Comment by Jane Doe">
  <Avatar>JD</Avatar>
  <span>Jane Doe</span>
  <time datetime="2025-01-15">January 15, 2025</time>
  <p>This is a great article! Thanks for sharing.</p>
</Comment>
Show Svelte source 
// In your Svelte component:
import Comment from "lily-design-system-svelte-headless/components/Comment/Comment.svelte";

<Comment>
  <!-- content -->
</Comment>

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>

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

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

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

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: comment
  • PascalCase: Comment
  • Description: a comment is anything that expresses an opinion, observation, explanation, etc.
  • Status: experimental — recent catalog addition with the least accumulated depth; contract may still move
  • HTML tag: <div>
  • CSS class: .comment
  • Interactive: no

ARIA

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

Keyboard

  • None -- comments are informational, not interactive

Props

  • label: string (optional) -- accessible label for the comment
  • children: slot (required) -- comment content
  • ...restProps: Any additional HTML attributes