> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Contacts

> Contacts — CometChat documentation.

CometChatContacts is a standalone UI component specifically designed to facilitate the display and management of users and groups within chat applications. It streamlines the process of showcasing all app users and available chat groups in a user-friendly interface, making it easier for users to connect and communicate effectively.

Key Features:

1. **User List View**: CometChatContacts presents a comprehensive list of all registered users within the application. This list allows users to quickly find and select specific individuals they wish to interact with.
2. **Group List View**: The component also offers a dedicated view to showcase all the available chat groups. This simplifies the process of joining or creating new group conversations.
3. **Smart Search Functionality**: Users can utilize the powerful search feature to quickly locate specific users or groups by typing names or keywords. This ensures seamless navigation, even in applications with a large user base.
4. **Selection Mode**: CometChatContacts supports a selection mode, enabling users to pick multiple contacts or groups simultaneously. This feature proves useful for creating group chats or forwarding messages to multiple recipients.
5. **Customizable Tab Layout**: Developers can easily customize the appearance of the tabs, including text colors, indicator color, and background, to match the app's branding and aesthetics.
6. **Selection Limit Control**: Developers have the flexibility to set a selection limit, restricting the number of contacts or groups a user can select during the selection mode. This helps maintain messaging policies and optimize user experience.
7. **User-Friendly Close Button**: The component provides a convenient close button feature, allowing users to exit the Contacts view and return to their previous screen or chat interface effortlessly.

## Properties

### Title

Heading text for the component

| Name                                            | Type   | Description                    |
| ----------------------------------------------- | ------ | ------------------------------ |
| title <Tooltip tip="Not available">🛑</Tooltip> | string | Heading text for the component |

### Tabs

| Name                                                     | Type                                         | Description                                    |
| -------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------- |
| tabs                                                     | [TabItem](/web-shared/tabitem)\[]            | List of tabs to be displayed                   |
| usersTabTitle <Tooltip tip="Not available">🛑</Tooltip>  | string                                       | Heading text for the user list                 |
| groupsTabTitle <Tooltip tip="Not available">🛑</Tooltip> | string                                       | Heading text for the group list                |
| tabVisibility                                            | [TabsVisibility](/web-shared/tabsvisibility) | Sets which tabs needed to be visible or hidden |

### Selection

Allows user to choose individual or multiple items.

| Name           | Type                                       | Description                                                            |
| -------------- | ------------------------------------------ | ---------------------------------------------------------------------- |
| selectionMode  | [SelectionMode](/web-shared/selectionmode) | Allows user to select one or more users / groups from the contact list |
| selectionLimit | number                                     | Number of items user can select from the contact list                  |

### Submit

User action to send data to the server

| Name                | Type                                                           | Description                                                               |
| ------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------- |
| onSubmitButtonClick | (users?:CometChat.User\[], groups?:CometChat.Group\[]) => void | Override the method that is invoked when user clicks on the submit button |
| hideSubmitButton    | boolean                                                        | When set to true, hides the submit button                                 |
| submitButtonText    | string                                                         | Text appearing on the submit button                                       |

### Callback

Functions that can be invoked by the user in response to a specific event or condition.

| Name        | Type                                                   | Description                                                                  |
| ----------- | ------------------------------------------------------ | ---------------------------------------------------------------------------- |
| onItemClick | (user?:CometChat.User, group?:CometChat.Group) => void | Override the method that is invoked when user clicks on a particular contact |
| onClose     | ()=>void                                               | Override the method that is invoked when user clicks on the close icon       |

### Assets

Custom asset URL used for graphical representation

| Name         | Type   | Description                  |
| ------------ | ------ | ---------------------------- |
| closeIconURL | string | Asset URL for the close icon |

### Style

Styling properties and values of all the components

| Name          | Type                                       | Description                                                                     |
| ------------- | ------------------------------------------ | ------------------------------------------------------------------------------- |
| contactsStyle | [ContactsStyle](/web-shared/contactsstyle) | Styling properties and values of the [Contacts](/ui-kit/vue/contacts) component |

### Configuration

Configurable properties of all the child components

| Name                | Type                                                     | Description                                                                                 |
| ------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| usersConfiguration  | [UsersConfiguration](/web-shared/users-configuration)    | Properties of the users component that are available for customisation via this component.  |
| groupsConfiguration | [GroupsConfiguration](/web-shared/groups-configurations) | Properties of the groups component that are available for customisation via this component. |