> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.