Comment
commentDisplays nested comments with reply indentation, optional connectors, and action slots.
Usage
Basic usage
Avatar + Author + Time + Text, the string text will automatically highlight @mention.
<Comment
author="Hulian"
avatar={{ fallback: "hu" }}
datetime="2 hours ago"
content="The work order has been assigned, please @Li Si follow up."
/>Operation area
actions slot CommentAction, pass href to render as a link operation.
<Comment
author="Hulian"
avatar={{ fallback: "hu" }}
datetime="2 hours ago"
content="This comment has like and reply operations."
actions={
<>
<CommentAction>👍 Like 12</CommentAction>
<CommentAction href="https://example.com/#reply">Reply</CommentAction>
</>
}
/>Nested reply + connecting line
children recursively Comment automatically indents, connector draws the left connecting line.
<Comment
author="Hulian"
avatar={{ fallback: "hu" }}
datetime="2 hours ago"
content="The problem has been reproduced."
connector
>
<Comment
author="Li Si"
avatar={{ fallback: "Li" }}
datetime="1 hour ago"
content="Received, root cause is being investigated."
/>
</Comment>System log
type="log" is weakened to dot mark + single line inline (work order status change, etc.).
<>
<Comment type="log" author="System" content="Set the ticket status to Processing" datetime="14:25" />
<Comment type="log" author="Zhang San" content="Assigned to @Li Si" datetime="14:26" />
</>Reuse User author card
author can be passed directly into the Hulian User assembly.
<Comment
author={<User name="Hulian" description="@hulian" avatarProps={{ fallback: "Hu", size: "sm" }} />}
datetime="Just now"
content="The author area can directly import the Hulian User assembly."
/>When to use
Use Comment to mix discussion replies, ticket comments, and system activity. type="comment" renders body content as a comment, while type="log" creates a muted inline log. [User] fits the author area, and RelativeTime fits timestamps.
Import
import { Comment, CommentActions, CommentAction, commentActionVariants } from "@hulianui/ui"Props
Comment
Props
| Name | Type | Default | Description |
|---|---|---|---|
| avatar | AvatarProps | — | Props for Avatar; ignored by log entries in favor of a system marker. |
| type | "comment" | "log" | "comment" | Entry presentation. |
| connector | boolean | false | Draws a left connector beside nested comments. |
| className | string | — | Remaining HTMLAttributes<HTMLElement> after omitting content and title. |
Slots
| Slot | Type | Description |
|---|---|---|
| author* | ReactNode | Author name or composed User. |
| datetime | ReactNode | Relative or absolute timestamp. |
| content | ReactNode | Body below a comment, or inline after a log author. |
| actions | ReactNode | Like or reply controls, commonly composed with CommentAction. |
| children | ReactNode | Nested Comment replies with automatic indentation and optional connectors. |
CommentAction
Props
| Name | Type | Default | Description |
|---|---|---|---|
| href | string | — | Renders a Hulian Link when set, otherwise a <button>. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Action content; remaining button attributes are forwarded. |
Pitfalls
- Log entries ignore
avatarand rendercontentinline. Use the default type for avatar-and-body comments. - Place nested Comment instances in
children; indentation is automatic, while connectors requireconnector. hrefdecides whether CommentAction is a Link or button. Use a link for anchor navigation and a button for interactions.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
<Comment
author="Hulian"
avatar={{ fallback: "hu" }}
datetime="2 hours ago"
content="This is a comment"
connector
>
<Comment author="Li Si" content="This is a sub-reply." />
</Comment>