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

## Overview

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](/ui-kit/react/v4/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>


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