> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# List Item

> List Item — CometChat documentation.

This element is used to display rows of information, such as a contact list, playlist, or menu. They contain Avatar, Status indicator, title, subtitle, tailView and menuView.

## Properties

| Name                 | Type                                                   | Description                                                         |
| -------------------- | ------------------------------------------------------ | ------------------------------------------------------------------- |
| id                   | string                                                 | Unique identifier of the element                                    |
| avatarURL            | string                                                 | Image URL for each row item                                         |
| avatarName           | string                                                 | Fallback name for the avatar of each row item                       |
| statusIndicatorColor | string                                                 | Background color of the indicator                                   |
| statusIndicatorIcon  | string                                                 | Background icon of the indicator                                    |
| title                | string                                                 | Heading text of each row item                                       |
| isActive             | boolean                                                | When set to true, sets the particular row item in the active status |
| hideSeparator        | boolean                                                | When set to true, hides the separator between each individual items |
| avatarStyle          | [avatarStyle](/web-elements/avatar#avatar-style)       | Styling properties and values of the avatar element                 |
| statusIndicatorStyle | [statusIndicatorStyle](/web-elements/status-indicator) | Styling properties and values of the status indicator element       |
| listItemStyle        | [ListItemStyle](/web-elements/list-item#listitemstyle) | Styling properties and values of the element                        |

## ListItemStyle

Styling properties and values of the element

| Name             | Description                                                                                                                                                                          |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| width            | Sets the width of the element                                                                                                                                                        |
| height           | Sets the height of the element                                                                                                                                                       |
| border           | Sets the border of the element                                                                                                                                                       |
| borderRadius     | Sets the border radius of the element                                                                                                                                                |
| background       | Sets all background style properties at once, such as color, image, origin and size, or repeat method. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| padding          | Sets the padding area on all four sides of the component                                                                                                                             |
| titleFont        | Sets all the different properties of font for the heading text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                              |
| titleColor       | Sets the foreground color of heading text.                                                                                                                                           |
| separatorColor   | Sets the background style properties for the separator between the individual items. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background)                   |
| activeBackground | Sets the background style properties of the element when in active state [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background)                               |
| hoverBackground  | Sets the background style properties of the element on mouseover [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background)                                       |

## Slots

Placeholder areas within the element's template

| Name         | Description                                                                                                       |
| ------------ | ----------------------------------------------------------------------------------------------------------------- |
| subtitleView | Placeholder to display the secondary title. For e.g. Last message in recent chats OR members count of a group     |
| tailView     | Placeholder to display the view on the extreme right of the row. For e.g. Unread count as a badge in recent chats |
| menuView     | Placeholder to display the view on mouseover. For e.g. Delete conversation option in recent chats                 |

## Events

Events dispatched from the element

| Name                | Description                                      |
| ------------------- | ------------------------------------------------ |
| cc-listitem-clicked | Event triggered when user clicks on each element |

## Usage

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import "@cometchat/chat-uikit-vue"; //import the web elements package.

    const clickHandler = event => {
    	console.log(event.detail.id )
    }

    //use the component
    <CometChatListItem @cc-listitem-clicked={clickHandler($event)}></CometChatListItem>
    ```
  </Tab>
</Tabs>