All components (244)

Emoji picker

Choice · EmojiPicker · .amset-emoji

What it is and when to use it

The emoji picker: a button that opens a panel with the search box, the categories, the recent ones and the skin tone, and that returns the chosen emoji. For a team chat, the comments of a ticket, the name of a channel.

When to use it

Where people write and it helps to be able to put in an emoji without knowing the system shortcut: a chat, a comment, a reaction.
onSelect receives the emoji; the usual thing is to write it where the cursor was.
trigger for a button of your own; without it the smiley button appears, named by label.
EmojiPanel on its own to mount it inside a panel of your own, without the button or the floating layer.
closeOnSelect={false} to choose several in a row; recent={false} and skinTones={false} remove those two parts.

When not to

A reaction with four fixed options: some buttons.
Choosing an icon from the library: that is another piece.

Keyboard: the button opens the panel and focus goes into the search box. Tab goes through the search box, the categories, the grid (a single stop) and the skin tone. In the grid, the arrows move through the emoji, Home and End go to the ends and Enter chooses. Escape closes and focus returns to the button.

Accessibility: each emoji is a button with its name in the provider's language ("grinning face"), not the bare glyph; the categories are pressed buttons and the skin tone is a radio group. The panel is a <dialog> attached to its button, like the dropdown.

Weight: the catalogue (almost two thousand emoji with their name and keywords) does not travel with the component: it is fetched the first time it opens, about 37 KB compressed per language. preloadEmoji() fetches it beforehand.

Fine appearance: variables --amset-emoji-cell (the side of each cell), --amset-emoji-height (how tall the grid is before scrolling) and --amset-emoji-font; classes amset-emoji, amset-emoji__cell, amset-emoji__shelf and amset-emoji__tone.

What it looks like

Thanks for your purchase

<EmojiPicker
  label="Pick an emoji"
  trigger={<Button variant="outline">Add emoji</Button>}
  onSelect={(emoji) => setTexto((t) => t + " " + emoji)}
/>

Props

Import it with import { EmojiPicker } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`onSelect`required	`(emoji: string) => void`	What is done with the chosen emoji: usually, writing it where the cursor was.
`className`	`string`	Merged with the library classes; it does not replace them.
`closeOnSelect`	`boolean`	Closes the panel on choosing. On by default; with `false` several can be chosen in a row.
`columns`	`number`	How many emoji per row. 8 by default.
`label`	`string`	What the panel (and the default button) is called for the screen reader. By default, "Emoji".
`maxRecent`	`number`	How many recent ones are kept. 24 by default.
`offset`	`number`	—
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	—
`placement`	`Placement`	—
`recent`	`boolean`	Saves the last chosen in the browser and shows them in the first tab. On by default.
`skinTones`	`boolean`	The skin tone picker, applied to the emoji that support it and remembered. On by default.
`trigger`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	What opens the panel. It has to be focusable: a button. By default, the smiley button.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-emoji-columns`	`8`
`--amset-emoji-cell`	`2.25rem`
`--amset-emoji-height`	`16rem`
`--amset-emoji-font`	`'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif`

How to change it

.amset-emoji {
  --amset-emoji-columns: ...;
  --amset-emoji-cell: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: