# EuiCommentItemComponent

**Type:** component



Individual comment item component displaying a single comment with author information, timestamp, and nested replies.
Provides automatic text truncation with expand/collapse functionality for long comments.
Supports nested comment threads with collapsible child comments and integrated reply textarea.
Displays author avatar, name, creation timestamp, and optional action buttons.
Automatically counts and manages child comment items through content projection.

```html
<eui-comment-item
  [authorName]="'Jane Smith'"
  [authorAvatarUrl]="'path/to/avatar.jpg'"
  [createdAt]="'1 day ago'"
  [currentAuthorAvatarUrl]="currentUser.avatar"
  [commentCharLimit]="300"
  (commentSend)="onReply($event)">
  This is the comment text that will be automatically truncated if it exceeds the character limit.
  <eui-comment-item-right-actions>
    <button euiIconButton euiBasicButton icon="eui-edit"></button>
  </eui-comment-item-right-actions>
</eui-comment-item>
```

### Accessibility
- "Read more" and "Read less" links are keyboard accessible with proper focus management
- Reply link is accessible via keyboard navigation
- Nested comment structure uses semantic `<ul>` and `<li>` elements
- Avatar component includes proper alt text support

### Notes
- Comment text is automatically truncated based on `commentCharLimit` (default: 500 characters)
- Nested `eui-comment-item` elements are automatically counted and displayed
- Reply textarea appears inline when user clicks "Answer" link
- Use `eui-comment-item-right-actions` for action buttons like edit or delete


**Selector:** `eui-comment-item`

## Inputs
- **authorAvatarUrl**: `string` - URL path to the comment author's avatar image. Displayed alongside the comment to identify the author. Optional.
- **authorName**: `string` - Name of the comment author. Displayed as the comment header to identify who wrote the comment. Optional.
- **commentCharLimit**: `number` - Maximum character length before comment text is truncated. Comments exceeding this limit show "Read more" link to expand full text.
- **createdAt**: `string` - Timestamp or date string indicating when the comment was created. Displayed in the comment header for temporal context. Optional.
- **currentAuthorAvatarUrl**: `string` - URL path to the current user's avatar image. Used for the reply textarea to identify the replying user. Optional.
- **hasChildren**: `boolean` - Indicates whether this comment has nested child comments. When true, displays collapse/expand controls for child comments.
- **isOpen**: `boolean` - Controls the expanded/collapsed state of nested child comments. When true, child comments are visible; when false, they are hidden.

## Outputs
- **commentCancel**: `EventEmitter` - Emitted when the user cancels reply input. Payload: void Triggered when user clicks cancel button in the reply textarea.
- **commentSend**: `EventEmitter` - Emitted when the user submits a reply comment. Payload: string - the reply comment text entered by the user Triggered when user clicks send button in the reply textarea.