Emoji action bar
Compact reaction picker: a toolbar of quick reaction emoji built on the action-bar composed component, with a trailing More action that swaps the surface for the full frimousse picker. Designed to sit inside a glass popover.
Preview
Use the controls to explore the component's props.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onEmojiSelect | (emoji: { emoji, label }) => void | — | Fires for both a quick reaction and a pick from the full picker, so a caller wires one handler. |
reactions | readonly Emoji[] | QUICK_REACTIONS | The quick row. frimousse cannot render a subset — EmojiPicker.Root exposes only columns/skinTone/locale/emojiVersion/emojibaseUrl/sticky, and its list is virtualized on fixed-height rows, so a fixed list is the only way to show just a few. It also costs no network request: the emoji CDN is fetched only if More is opened. |
hideMore | boolean | false | Drops the trailing More action, leaving the quick row only — nothing then loads emoji data at all. |
Example
6 quick reactions, then More opens the full picker
import { EmojiActionBar } from "@exegia/corpora-ui"
<PopoverGlass glassVariant="frosted">
<EmojiActionBar onEmojiSelect={({ emoji, label }) => react(emoji, label)} />
</PopoverGlass>Last updated on