Reactions - CometChat Docs

The CometChatReactions component renders emoji reaction pills on a message bubble’s footer area. It dynamically calculates how many pills to show based on the parent container width and provides overflow handling via a “+N” button with a popover list.

Overview

The Reactions component provides interactive emoji reaction display:

Dynamic Layout: Automatically adjusts visible reaction count based on container width
Overflow Handling: Shows a “+N” button when reactions exceed available space, with a popover list for hidden reactions
Toggle Support: Clicking a reaction pill emits an event to add or remove the reaction
Hover Tooltips: Displays reaction info tooltips showing who reacted with each emoji
Alignment Aware: Adjusts popover placement based on message bubble alignment (left/right)
Responsive: Adapts popover placement for mobile viewports
Keyboard Accessible: Full keyboard support for navigating and toggling reactions

Live Preview — default reactions preview. Open in Storybook ↗

Basic Usage

Simple Reactions Display

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatReactionsComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-reactions-demo',
  standalone: true,
  imports: [CometChatReactionsComponent],
  template: `
    <cometchat-reactions
      [message]="message"
      [alignment]="'left'"
      (reactionClick)="onReactionClick($event)">
    </cometchat-reactions>
  `
})
export class ReactionsDemoComponent {
  message!: CometChat.BaseMessage;

  onReactionClick(event: { reaction: CometChat.ReactionCount; message: CometChat.BaseMessage }): void {
    const emoji = event.reaction.getReaction();
    const isReactedByMe = event.reaction.getReactedByMe();
    console.log(`${isReactedByMe ? 'Removing' : 'Adding'} reaction: ${emoji}`);
  }
}

With Custom Request Builder and Overflow Handling

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatReactionsComponent } from '@cometchat/chat-uikit-angular';
import { MessageBubbleAlignment } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-reactions-custom',
  standalone: true,
  imports: [CometChatReactionsComponent],
  template: `
    <cometchat-reactions
      [message]="message"
      [alignment]="alignment"
      [reactionsRequestBuilder]="requestBuilder"
      [hoverDebounceTime]="300"
      (reactionClick)="onReactionClick($event)"
      (reactionListItemClick)="onListItemClick($event)">
    </cometchat-reactions>
  `
})
export class ReactionsCustomComponent {
  message!: CometChat.BaseMessage;
  alignment = MessageBubbleAlignment.right;
  requestBuilder!: CometChat.ReactionsRequestBuilder;

  ngOnInit(): void {
    this.requestBuilder = new CometChat.ReactionsRequestBuilder()
      .setMessageId(this.message.getId())
      .setLimit(20);
  }

  onReactionClick(event: { reaction: CometChat.ReactionCount; message: CometChat.BaseMessage }): void {
    console.log('Reaction pill clicked:', event.reaction.getReaction());
  }

  onListItemClick(event: { reaction: CometChat.Reaction; message: CometChat.BaseMessage }): void {
    console.log('Reaction list item clicked:', event.reaction.getReaction());
  }
}

Properties

Property	Type	Default	Description
`message`	`CometChat.BaseMessage`	required	The message object containing reactions to display
`alignment`	`MessageBubbleAlignment`	`MessageBubbleAlignment.left`	Alignment of the message bubble (left or right). Used to determine popover placement for the overflow list
`reactionsRequestBuilder`	`CometChat.ReactionsRequestBuilder`	`undefined`	Optional custom reactions request builder for fetching reaction details
`hoverDebounceTime`	`number`	`500`	Debounce time in milliseconds for hover tooltips

Events

Event	Payload Type	Description
`reactionClick`	`{ reaction: CometChat.ReactionCount; message: CometChat.BaseMessage }`	Emitted when a reaction pill is clicked. Use this to toggle (add/remove) the reaction
`reactionListItemClick`	`{ reaction: CometChat.Reaction; message: CometChat.BaseMessage }`	Emitted when a reaction list item is clicked from the overflow popover

Customization

CSS Variables

The Reactions component uses BEM-style CSS classes that can be customized:

/* Reaction pills container */
.cometchat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cometchat-spacing-1);
}

/* Individual reaction pill */
.cometchat-reactions__pill {
  padding: var(--cometchat-spacing-1) var(--cometchat-spacing-2);
  border-radius: var(--cometchat-radius-max);
  border: 1px solid var(--cometchat-border-color-light);
  background: var(--cometchat-background-color-01);
  cursor: pointer;
}

/* Pill reacted by current user */
.cometchat-reactions__pill--reacted {
  border-color: var(--cometchat-primary-color);
  background: var(--cometchat-extended-primary-color-50);
}

/* Pill hover state */
.cometchat-reactions__pill:hover {
  background: var(--cometchat-background-color-02);
}

/* More reactions button */
.cometchat-reactions__more-button {
  font: var(--cometchat-font-caption1-medium);
  color: var(--cometchat-text-color-secondary);
}

Theming

The component adapts to light and dark themes through CSS variables:

/* Light theme (default) */
:root {
  --cometchat-primary-color: #6852D6;
  --cometchat-background-color-01: #FFFFFF;
  --cometchat-border-color-light: #E8E8E8;
  --cometchat-extended-primary-color-50: #F5F3FD;
}

/* Dark theme */
[data-theme="dark"] {
  --cometchat-primary-color: #8B7BE8;
  --cometchat-background-color-01: #1A1A1A;
  --cometchat-border-color-light: #3A3A3A;
  --cometchat-extended-primary-color-50: #2D2840;
}

Accessibility

Key	Action
`Tab`	Move focus between reaction pills and the more button
`Enter` / `Space`	Toggle the focused reaction (add or remove)
`Enter` / `Space` on “+N”	Open the overflow reaction list popover

ARIA Attributes

Element	Attribute	Value	Description
Reaction pill	`role`	`"button"`	Indicates the pill is interactive
Reaction pill	`aria-label`	Dynamic	Describes emoji, count, and whether the current user reacted
Reaction pill	`tabindex`	`"0"`	Makes the pill focusable
More button	`role`	`"button"`	Indicates the overflow button is interactive
More button	`aria-label`	Dynamic	Describes the number of hidden reactions

Reaction pills announce the emoji, count, and user reaction status
Toggling a reaction announces whether it was added or removed via a live region
The overflow button announces how many additional reactions are hidden

CometChatReactionList - Displays the full list of users who reacted, used in the overflow popover
CometChatReactionInfo - Tooltip showing who reacted with a specific emoji
CometChatMessageBubble - Parent component that hosts reactions in its footer
CometChatPopover - Used for the overflow reaction list popover

​Overview

​Basic Usage

​Simple Reactions Display

​With Custom Request Builder and Overflow Handling

​Properties

​Events

​Customization

​CSS Variables

​Theming

​Accessibility

​Keyboard Navigation

​ARIA Attributes

​Screen Reader Support

​Related Components

Overview

Basic Usage

Simple Reactions Display

With Custom Request Builder and Overflow Handling

Properties

Events

Customization

CSS Variables

Theming

Accessibility

Keyboard Navigation

ARIA Attributes

Screen Reader Support

Related Components