EmojiPickerDropdown

The EmojiPickerDropdown component combines the EmojiPicker with a DropdownWrapper to provide a complete dropdown emoji selection experience. Simply pass a trigger element and handle emoji selection.

EmojiPickerDropdown

const [selectedEmoji, setSelectedEmoji] = useState("");

<Row gap="16" vertical="center">
<EmojiPickerDropdown
  trigger={<Button label="Select Emoji" />}
  onSelect={(emoji) => setSelectedEmoji(emoji)}
/>
{selectedEmoji && (
  <Text variant="heading-default-xl">
    Selected: {selectedEmoji}
  </Text>
)}
</Row>

With IconButton trigger

You can use an IconButton as the trigger for a more compact UI.

With IconButton

const [selectedEmoji, setSelectedEmoji] = useState("");

<Row gap="16" vertical="center">
<EmojiPickerDropdown
  trigger={<IconButton icon="smiley" variant="secondary" aria-label="Pick an emoji" />}
  onSelect={(emoji) => setSelectedEmoji(emoji)}
/>
{selectedEmoji && (
  <Text variant="heading-default-xl">
    {selectedEmoji}
  </Text>
)}
</Row>

Columns

You can customize the number of columns in the emoji grid.

Custom columns

const [selectedEmoji, setSelectedEmoji] = useState("");

<Row gap="16" vertical="center">
<EmojiPickerDropdown
  trigger={<Button label="Select Emoji (10 columns)" />}
  onSelect={(emoji) => setSelectedEmoji(emoji)}
  columns="10"
/>
{selectedEmoji && (
  <Text variant="heading-default-xl">
    {selectedEmoji}
  </Text>
)}
</Row>

Placement

Control where the dropdown appears relative to the trigger using the placement prop.

Placement

const [selectedEmoji, setSelectedEmoji] = useState("");

<Row gap="16" wrap vertical="center">
<EmojiPickerDropdown
  trigger={<Button label="Top" />}
  onSelect={(emoji) => setSelectedEmoji(emoji)}
  placement="top"
/>
<EmojiPickerDropdown
  trigger={<Button label="Bottom" />}
  onSelect={(emoji) => setSelectedEmoji(emoji)}
  placement="bottom"
/>
<EmojiPickerDropdown
  trigger={<Button label="Left" />}
  onSelect={(emoji) => setSelectedEmoji(emoji)}
  placement="left"
/>
<EmojiPickerDropdown
  trigger={<Button label="Right" />}
  onSelect={(emoji) => setSelectedEmoji(emoji)}
  placement="right"
/>
{selectedEmoji && (
  <Text variant="heading-default-xl">
    {selectedEmoji}
  </Text>
)}
</Row>

Custom background

Customize the dropdown background color.

Custom background

const [selectedEmoji, setSelectedEmoji] = useState("");

<Row gap="16" vertical="center">
<EmojiPickerDropdown
  trigger={<Button label="Custom Background" />}
  onSelect={(emoji) => setSelectedEmoji(emoji)}
  background="neutral-weak"
/>
{selectedEmoji && (
  <Text variant="heading-default-xl">
    {selectedEmoji}
  </Text>
)}
</Row>

Controlled state

Control the open/close state externally using open and onOpenChange.

Controlled state

const [isOpen, setIsOpen] = useState(false);
const [selectedEmoji, setSelectedEmoji] = useState("");

<Row gap="16" vertical="center">
<EmojiPickerDropdown
  trigger={<Button label="Controlled Dropdown" />}
  onSelect={(emoji) => setSelectedEmoji(emoji)}
  open={isOpen}
  onOpenChange={setIsOpen}
/>
<Button 
  variant="secondary" 
  label={isOpen ? "Close" : "Open"} 
  onClick={() => setIsOpen(!isOpen)}
/>
{selectedEmoji && (
  <Text variant="heading-default-xl">
    {selectedEmoji}
  </Text>
)}
</Row>

API reference

	Type	Default
onSelectrequired Callback when an emoji is selected (required)	(emoji: string) => void	—
background Background color of the dropdown	StyleProps["background"]	surface
columns Number of columns in the emoji grid	123456789101112	8
…and every DropdownWrapperProps prop	inherited	—
trigger The element that triggers the dropdown (required)	ReactElement	—
closeAfterClick Whether to close dropdown after selecting emoji	boolean	true
placement Position of dropdown relative to trigger	Placement	bottom-start
open Controlled open state	boolean	—
onOpenChange Callback when open state changes	(open: boolean) => void	—
fillWidth Whether dropdown matches trigger width	boolean	—