> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-013b37f0.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Emoji Keyboard

`CometChatEmojiKeyboard` is CometChat's very own customizable emoji keyboard. it can be rendered by calling function `showCometChatEmojiKeyboard`.

## Properties

| Properties                      | Type         | Description                                                                                                                  |
| ------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------- |
| **context**                     | BuildContext | required for `showCometChatEmojiKeyboard` to determine the location in the widget tree where the keyboard needs to be shown. |
| **titleStyle**                  | TextStyle    | used to customise the appearance of the title text                                                                           |
| **backgroundColor**             | Color        | used to set the background color                                                                                             |
| **dividerColor**                | Color        | used to set the divider color                                                                                                |
| **selectedCategoryIconColor**   | Color        | used to set the color of selected icon                                                                                       |
| **unselectedCategoryIconColor** | Color        | used to set the color of unselected icon                                                                                     |
| **categoryLabel**               | TextStyle    | used to customise the appearance of the category label text                                                                  |

***

## Usage

Developers can load the emoji keyboard with just one line of code.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    showCometChatEmojiKeyboard(context: context);
    ```
  </Tab>
</Tabs>

Or customize its appearance as per their wish

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    showCometChatEmojiKeyboard(
        context: context,
        backgroundColor: Colors.amber.shade200,
        dividerColor: Colors.red.shade400,
        selectedCategoryIconColor: Colors.pink.shade300,
        unselectedCategoryIconColor: Colors.orange.shade400
    );
    ```
  </Tab>
</Tabs>