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

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 instead of renaming this chat picker.