Comment list

---

The EuiCommentList is a timeline component built on top of EuiTimeline. It allows you to display comments or logged actions that either a user or a system has performed.

warning

For accessibility, it is highly recommended to provide a descriptive aria-label or the ID of an external label to the aria-labelledby prop of the EuiCommentList. A timelineAvatarAriaLabel should be provided for every EuiComment with or without a timelineAvatar as IconType.

Basic comment list

Use EuiCommentList to display a list of EuiComments. Pass an array of EuiComment objects and EuiCommentList will generate a comment thread.

Comment

The EuiComment is flexible and adapts the design according to the props passed.

The following demo shows how you can combine different props to create different types of comments events like a regular, update, update with a danger background and a custom one.

Timeline avatar

The timeline icon is a very important part of the comment:

• By default, each EuiComment shows an avatar with the userAvatar icon. A timelineAvatarAriaLabel should be provided when using this default option.
• You can customize your avatar by passing to the timelineAvatar any of the icon types that EuiIcon supports. The icon will show inside a subdued avatar. Consider this option when showing a system update. Providing a timelineAvatarAriaLabel is recommended.
• You can further customize the timeline icon by passing to the timelineAvatar a EuiAvatar.

Comment event actions

There are scenarios where you might want to allow the user to perform actions related to each comment. Some common actions include: editing, deleting, sharing and copying. To add custom actions to a comment, use the actions prop. These will be placed to the right of the metadata in the comment's header. We recommend using a EuiButtonIcon to trigger an action. When having multiple actions, consider grouping them in a nested menu system using a EuiPopover with a EuiContextMenu.

A comment system

The below example uses a list of EuiComments, a EuiMarkdownEditor, and a EuiMarkdownFormat to create a simple comment system.

• Each comment renders in a EuiComment.
• We use the EuiMarkdownEditor to post the EuiComment.children. This means the content uses Markdown.
• When the new EuiComment is posted, we use the EuiMarkdownFormat to wrap the EuiComment.children and render the Markdown correctly.

When dealing with asynchronous events like posting a message we recommend setting the EuiMarkdownEditor to a readOnly state and the "Add comment" EuiButton to a isLoading state. This will ensure users understand that the content cannot be changed while the comment is being submitted.