Emoji Picker

Example

Last picked emojis:

Popover Emoji Picker

Usage

		<EmojiPicker onpicked={(emoji) => console.log('selected emoji: ' + emoji.unicode)} />

<!-- or popover emoji picker -->

<PopoverEmojiPicker onpicked={(emoji) => console.log('selected emoji: ' + emoji.unicode)}>
	{#snippet child({ props })}
		<Button size="iconLg" {...props}>Open Emoji Picker</Button>
	{/snippet}
</PopoverEmojiPicker>

API Reference

EmojiPicker

A searchable emoji picker grid with category tabs.

Property Type Description

onpicked

function

Callback invoked when an emoji is selected. Default: —

height

number

The height of the picker in pixels. Default: 300

width

number

The width of the picker in pixels. Default: 344

columns

number

The number of emoji columns. Default: 8

class

string

Additional CSS classes to apply. Default: —

Property

onpicked

height

width

columns

class

PopoverEmojiPicker

An emoji picker wrapped in a popover.

Property Type Description

onpicked

function

Callback invoked when an emoji is selected. Default: —

open $bindable

boolean

Whether the popover is open. Default: false

triggerRef $bindable

HTMLElement

Reference to the trigger element. Default: —

children

Snippet

Custom trigger content. Default: —

class

string

Additional CSS classes to apply. Default: —

Property

onpicked

open

triggerRef

children

class