Chat Reaction Bar
Row of emoji reaction pills under a chat message. Each pill shows an emoji and count; the current user's own reactions get an accent tint and aria-pressed. Provide onAdd to render a trailing add-reaction button that opens a ChatEmojiPicker popover.
@astryxdesign/lab
Usage
Row of emoji reaction pills under a chat message. Each pill shows an emoji and count; the current user's own reactions get an accent tint and aria-pressed. Provide onAdd to render a trailing add-reaction button that opens a ChatEmojiPicker popover.
Typed props
| Prop | Type and behavior |
|---|---|
reactions | {emoji: string; count: number; isSelected?: boolean; label?: string}[] · requiredReactions to render, in display order. isSelected marks the current user's own reactions (accent tint + aria-pressed). label is a human-readable description like "Ana and Dana reacted with 🎉", used as the pill tooltip and accessible label. |
onToggle | (emoji: string) => voidCalled with the pill's emoji when the user toggles a reaction on or off. |
onAdd | (emoji: string) => voidCalled with the picked emoji when the user adds a reaction from the emoji picker. The trailing add-reaction button renders only when provided. |
emojis | readonly ChatEmojiOption[]Emoji options for the add-reaction picker. Defaults to DEFAULT_CHAT_EMOJIS. |
addLabel | string · default 'Add reaction'Accessible label for the add-reaction button and picker dialog. |
label | string · default 'Reactions'Accessible label for the reaction group. |