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.

Loading...

Comment

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

1. B

   C usernameD eventE timestamp

   F

   G children

<EuiCommentList aria-label="Comment example">
    <EuiComment
      eventIcon="pencil"
      username="janed"
      event={event}
      timestamp={timestamp}
      actions={customActions}
    >
      {children}
    </EuiComment>
  </EuiCommentList>

1. 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.
2. eventIcon: Icon that shows before the username. Use in conjunction with eventIconAriaLabel to pass an aria label to the event icon.
3. username: Author of the comment.
4. event: Describes the event that took place.
5. timestamp: Time of occurrence of the event.
6. 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.
7. 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.

Loading...

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.

Loading...

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.

Loading...

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.

Loading...

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 ↵

𐘂𐘂