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.

C usernameD eventE timestamp
F
G children

Code snippet

<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 a EuiIcon['type'] or a a 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 userAvatar 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 userAvatar 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

Extends HTMLAttributes


Prop	Description and type	Default value
Prop username#	Description and type Author of the comment. Type: `ReactNode`	Default value Required
Prop timestamp#	Description and type Time of occurrence of the event. Its format is set on the consumer's side Type: `ReactNode`	Default value
Prop event#	Description and type Describes the event that took place Type: `ReactNode`	Default value
Prop actions#	Description and type Custom actions that the user can perform from the comment's header Type: `ReactNode \| ReactNode[]`	Default value
Prop children#	Description and type Accepts any ReactNode. Renders in a panel within the comment event. Type: `ReactNode`	Default value
Prop eventIcon#	Description and type Custom icon that shows before the username. Type: `IconType`	Default value
Prop eventIconAriaLabel#	Description and type Specify an `aria-label` for the `eventIcon`. If no `aria-label` is passed we assume the icon is purely decorative. Type: `string`	Default value
Prop eventColor#	Description and type Background color for the comment's header. Type: `"transparent" \| "accent" \| "primary" \| "success" \| "warning" \| "danger" \| "plain" \| "subdued"`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop timelineAvatar#	Description and type Main avatar that accompanies the comment. Should indicate who is the author of the comment. Any `ReactNode`, but preferably `EuiAvatar`, or a `string` as an `EuiAvatarProps['iconType']`. If no `timelineAvatar` is passed, the `userAvatar` icon will be used as the avatar. Type: `string \| number \| boolean \| ReactElement \| Iterable<ReactNode> \| ReactPortal \| ComponentClass<...> \| FunctionComponent<...>`	Default value
Prop timelineAvatarAriaLabel#	Description and type Specify an `aria-label` and `title` for the `timelineAvatar` when passed as an `IconType` or when nothing is passed. If no `timelineAvatarAriaLabel` is passed we assume the avatar is purely decorative. Type: `string`	Default value
Prop verticalAlign#	Description and type Vertical alignment of the event with the icon Type: `"center" \| "top"`	Default value

EuiCommentEvent

Extends HTMLAttributes


Prop	Description and type	Default value
Prop username#	Description and type Author of the comment. Type: `ReactNode`	Default value Required
Prop timestamp#	Description and type Time of occurrence of the event. Its format is set on the consumer's side Type: `ReactNode`	Default value
Prop event#	Description and type Describes the event that took place Type: `ReactNode`	Default value
Prop actions#	Description and type Custom actions that the user can perform from the comment's header Type: `ReactNode \| ReactNode[]`	Default value
Prop children#	Description and type Accepts any ReactNode. Renders in a panel within the comment event. Type: `ReactNode`	Default value
Prop eventIcon#	Description and type Custom icon that shows before the username. Type: `IconType`	Default value
Prop eventIconAriaLabel#	Description and type Specify an `aria-label` for the `eventIcon`. If no `aria-label` is passed we assume the icon is purely decorative. Type: `string`	Default value
Prop eventColor#	Description and type Background color for the comment's header. Type: `"transparent" \| "accent" \| "primary" \| "success" \| "warning" \| "danger" \| "plain" \| "subdued"`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value