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

# Emoji Keyboard

> Emoji Keyboard — CometChat documentation.

This element is CometChat's very own emoji picker with native emoji support.

## Properties

| Name               | Type                                                                  | Description                                          |
| ------------------ | --------------------------------------------------------------------- | ---------------------------------------------------- |
| emojiData          | Array                                                                 | JSON array of emojis grouped along with the category |
| emojiKeyboardStyle | [EmojiKeyboardStyle](/web-elements/emoji-keyboard#emojikeyboardstyle) | Styling properties and values of the element         |

## Events

Events dispatched from the element

| Name             | Description                                                              |
| ---------------- | ------------------------------------------------------------------------ |
| cc-emoji-clicked | Event triggered when user clicks on a particular emoji from the keyboard |

## EmojiKeyboardStyle

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) |
| textFont       | Sets all the different properties of font for the category name. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                             |
| textColor      | Sets the foreground color of category name.                                                                                                                                          |
| iconTint       | Sets the tint or color applied to the category icon.                                                                                                                                 |
| activeIconTint | Sets the tint or color applied to the currently active category icon.                                                                                                                |

## Usage

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

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

    //create style object
    const emojiKeyboardStyle = new EmojiKeyboardStyle({
      textFont: "500 14px Inter, sans-serif",
      textColor: "black",
      border: "1px solid green",
      width: "500px",
      height: "300px"
    });

    <cometchat-emoji-keyboard 
    :emojiKeyboardStyle="emojiKeyboardStyle"
    @cc-emoji-clicked="clickHandler($event)"></cometchat-emoji-keyboard>
    ```
  </Tab>
</Tabs>