BundyUI

Overlays

PopoverButton

EmojiPicker

A trigger-activated emoji panel — grouped into labeled categories with a recently-used section, and searchable by name. Wraps `Popover` internally; pass a custom trigger via the default slot or use the built-in icon button.

html
<UiEmojiPicker />

Categories

categories replaces the full Unicode set with your own groups, each a label for the section heading and an emojis array of { emoji, name } pairs. The name is what the tooltip shows and what the search box matches, so it's worth writing even for a four-emoji list.

Recents

recents is the recently-used row above the categories. Pass it with update:recents — or just v-model:recents — when you want to persist the list yourself, to localStorage or an account preference; leave it out and the picker tracks recents internally for the session only.

Pick an emoji

Default recents

defaultRecents seeds the recents row when you're not controlling recents. It's the place to put a house set — the reactions your product actually uses — so the first person to open the picker isn't met with an empty section.

Max recents

maxRecents caps how many emoji the recents row keeps; picking a new one past the limit drops the oldest. Lower it to keep the section to a single row on a narrow panel — the two below hold four and twenty-four respectively, so keep picking and watch the first one fall off.

Keeps four

Placeholder

placeholder is the hint in the search box at the top of the panel. Worth changing when you've narrowed categories to a small set, where “Search emoji…” overpromises what's in there.

Disabled

disabled styles the default trigger as disabled and blocks the popover from opening — including behind a custom trigger of your own.

Content

content positions the popover panel relative to the trigger — side, align and sideOffset, defaulting to bottom/start with an 8px gap. Reach for it when the trigger sits low or far right, where the panel would otherwise open past the edge of the viewport.

Default slot — bring your own trigger

`v-model:recents` — controlled, so you can persist it yourself

Recents: —

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
categories
EmojiCategory[]
The full Unicode emoji set, grouped into Smileys & Emotion, People & Body, Animals & Nature, Food & Drink, Travel & Places, Activities, Objects, Symbols, and Flags.
The emoji shown, grouped into labeled sections.
recents
string[]
—
The recently used emoji, shown in their own section above the categories. Pass this with `update:recents` to persist the list yourself (e.g. to `localStorage`); omit it to let the picker track recents internally, starting from `defaultRecents`.
defaultRecents
string[]
[]
The initial recently-used emoji when `recents` isn't provided.
maxRecents
number
24
Maximum number of emoji kept in the recents section.
placeholder
string
'Search emoji…'
Placeholder text shown in the search input.
disabled
boolean
false
Disables the picker — styles the default trigger button as disabled, and prevents the popover from opening even behind a custom trigger passed via the default slot.
content
EmojiPickerContentProps
{ side: 'bottom', align: 'start', sideOffset: 8 }
Positioning options for the popover panel, such as side, alignment, and offset.

Slots

Slot
default

Emits

Event
Payload
Description
select
[emoji: string]
Fires when an emoji is clicked, whether from search results, recents, or a category.
update:recents
[value: string[]]
—

Types

ts
interface EmojiItem {
    /**
     * The emoji character itself.
     */
    emoji: string;

    /**
     * Display name, shown as a tooltip and matched against while searching.
     */
    name: string;
}
ts
interface EmojiCategory {
    /**
     * Section heading shown above this category's emoji.
     */
    label: string;

    /**
     * The emoji belonging to this category.
     */
    emojis: EmojiItem[];
}
ts
interface EmojiPickerContentProps {
    side?: "top" | "right" | "bottom" | "left";
    align?: "start" | "center" | "end";
    sideOffset?: number;
}