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.

Accessibility recommendation

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.

3 username4 event5 timestamp
6
7 children

Code snippet

✄𐘗ts code block:
✄𐘗<EuiCommentList aria-label="Comment example">
    <EuiComment
      eventIcon="pencil"
      username="janed"
      event={event}
      timestamp={timestamp}
      actions={customActions}
    >
      {children}
    </EuiComment>
  </EuiCommentList>

timelineAvatar: Shows an avatar that should indicate who is the author of the comment. To customize, pass a string as an EuiIcon['type'] or an EuiAvatar. Use in conjunction with timelineAvatarAriaLabel to pass an aria label to the avatar. If no avatar is provided, it will default to an avatar with a user icon.
eventIcon: Icon that shows before the username. Use in conjunction with eventIconAriaLabel to pass an aria label to the event icon.
username: Author of the comment.
event: Describes the event that took place.
timestamp: Time of occurrence of the event.
actions: Custom actions that the user can perform from the comment's header. When having multiple actions, consider grouping them in a nested menu system using a EuiPopover with a EuiContextMenu.
children: A user message or any custom component.

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 user icon. A timelineAvatarAriaLabelshould 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 actionsprop. 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.

Props

EuiCommentList

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop comments#	Description and type List of comments to render. See #EuiComment Type: `EuiCommentProps[]`	Default value
Prop gutterSize#	Description and type Sets the size of the vertical space between each comment Type: `"m" \| "l" \| "xl"`	Default value `l`

EuiComment