Loading…

Emoji Reaction

beta

A reaction button that springs open a bar of emoji; picking one — or holding it, or dragging onto it from the button — floats copies up out of the bar.

Feedback
1 file
1 npm package
Accessibility notes

Playground

Installation

The CLI installs popover as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add emoji-reaction

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { EmojiReaction } from "@/components/ui/emoji-reaction";

Examples

Every example the tests run, live and operable, side by side.

Default
Sizes
Alignment
Custom Emoji
On AMessage
Close On Pick

API

Generated from the component's own types, so a prop cannot appear here without existing.

<EmojiReaction>

Prop	Type	Default
`align` Which edge of the bar lines up with the trigger. It still shifts inward near the screen edge.	`"start" \| "center" \| "end"`	`"center"`
`barClassName` Classes for the bar. `className` goes to the trigger.	`string`	—
`barLabel` The bar's accessible name.	`string`	`"Reactions"`
`defaultOpen`	`boolean`	`false`
`defaultValue` The initial pick when uncontrolled.	`string \| null`	`null`
`emojis` The emoji in the bar, as `{ emoji, label }` or bare strings named through `labels`.	`readonly (string \| EmojiReactionItem)[]`	`DEFAULT_EMOJIS`
`label` The trigger's accessible name; the current pick is added after it.	`string`	`"React"`
`labels` Accessible names for bare-string emoji, keyed by the emoji.	`Readonly<Record<string, string>>`	—
`onOpenChange`	`(open: boolean) => void`	—
`onReact` Called every time an emoji is picked, including each repeat while one is held.	`(emoji: string) => void`	—
`onValueChange` Called when the pick changes.	`(emoji: string) => void`	—
`open`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`value` The last pick, controlled. `null` shows the smiley again.	`string \| null`	—
`asChild` Use your own element — a message, a card, an image — as the trigger. It keeps its own content and name; give it one that says it can be reacted to.	`boolean`	`false`

Plus every attribute of <button> except value, defaultValue.

Accessibility

The trigger is a disclosure button (aria-expanded, aria-controls; no aria-haspopup, which has no "toolbar" value) named "React", then "React, Heart" once something is picked. The bar is role="toolbar" rather than a menu, because it stays open, picks repeat and holding is the point — a menu promises choose-and-close. Each emoji is a button named by its label (default English names; pass `labels` or `{ emoji, label }`), and the current pick has aria-current. Roving tabindex: arrow keys (mirrored in RTL), Home and End move along the bar; Enter or ArrowUp/ArrowDown on the trigger opens it with focus on the current pick; Escape, a click outside and Tab close it, and focus returns to the trigger unless it has already moved somewhere on purpose. A tap picks on release, so a press that slides off does nothing. The floating copies are an aria-hidden, pointer-transparent layer; under reduced motion none are made and nothing lifts. With asChild your element keeps its own name, so give it one that says it can be reacted to.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

align

Which edge of the bar lines up with the trigger. It still shifts inward near the screen edge.

"start" | "center" | "end"

"center"

barClassName

Classes for the bar. className goes to the trigger.

string

—

barLabel

The bar's accessible name.

string

"Reactions"

defaultOpen

boolean

false

defaultValue

The initial pick when uncontrolled.

string | null

null

emojis

The emoji in the bar, as { emoji, label } or bare strings named through labels.

readonly (string | EmojiReactionItem)[]

DEFAULT_EMOJIS

label

The trigger's accessible name; the current pick is added after it.

string

"React"

labels

Accessible names for bare-string emoji, keyed by the emoji.

Readonly<Record<string, string>>

—

onOpenChange

(open: boolean) => void

—

onReact

Called every time an emoji is picked, including each repeat while one is held.

(emoji: string) => void

—

onValueChange

Called when the pick changes.

(emoji: string) => void

—

open

boolean

—

size

"sm" | "md" | "lg"

"md"

value

The last pick, controlled. null shows the smiley again.

string | null

—

asChild

Use your own element — a message, a card, an image — as the trigger. It keeps its own content and name; give it one that says it can be reacted to.

boolean

false