> ## 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.

# Emoji Keyboard

> Emoji Keyboard — CometChat documentation.

`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>


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