Chat Emoji Picker
Popover emoji grid wrapping a trigger button: a shortname filter input over an 8-column grid with arrow-key roving focus. Picking an emoji calls onSelect and closes the popover, restoring focus to the trigger. Ships with a small default emoji set; override via emojis.
@astryxdesign/lab
Usage
Popover emoji grid wrapping a trigger button: a shortname filter input over an 8-column grid with arrow-key roving focus. Picking an emoji calls onSelect and closes the popover, restoring focus to the trigger. Ships with a small default emoji set; override via emojis.
Typed props
| Prop | Type and behavior |
|---|---|
onSelect | (emoji: string) => void · requiredCalled with the picked emoji character. The popover closes itself after selection. |
emojis | readonly {emoji: string; name: string}[] · default DEFAULT_CHAT_EMOJISEmoji options rendered in the grid, 8 per row. name drives filtering and accessible labels. |
label | string · default 'Pick an emoji'Accessible label for the popover dialog. |
searchLabel | string · default 'Search emoji'Placeholder and hidden label for the filter input. |
children | ReactNode · requiredTrigger element. Must contain a button; the popover wires up click handlers and ARIA automatically. |