# ChatEmojiPicker

Opens a popover from a trigger button. A shortname field filters an 8-column emoji grid, and arrow keys move focus through that grid. Choosing an emoji emits `select`, closes the popover, and returns focus to the trigger.

This component ships in `@astryx-vue/lab` and is published only under the `canary` tag.

## Import

```ts
import { ChatEmojiPicker, DEFAULT_CHAT_EMOJIS } from '@astryx-vue/lab'
```

`DEFAULT_CHAT_EMOJIS` is the built-in set of 16 common reactions. Pass `emojis` to replace it.

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `emojis` | `readonly { emoji: string; name: string }[]` | `DEFAULT_CHAT_EMOJIS` | Options in the grid. `name` drives filtering and the button's accessible name. |
| `label` | `string` | `'Pick an emoji'` | Accessible name of the popover dialog. |
| `searchLabel` | `string` | message `@astryx.emojiPicker.searchLabel` | Placeholder and hidden label of the filter field. |

## Events

| Name | Payload | Description |
| --- | --- | --- |
| `select` | `emoji: string` | The chosen emoji. The popover then closes and the filter clears. |

## Slots

The default slot is the trigger. It must contain a `<button>`. The popover attaches click handling and `aria-expanded` to that button.

The filter, the grid label, and the empty-result sentence come from `@astryx.emojiPicker.*`. For a full CLDR-grouped picker — frequently used emoji, keyword search, and a preview footer — use [EmojiPicker](/en/lab/emoji-picker) instead of renaming this chat picker.