Skip to main content
The CometChatStickersKeyboard component provides a browsable sticker picker that fetches stickers from the CometChat stickers extension. Stickers are organized by category tabs with a grid layout, supporting loading, empty, and error states.

​
Overview

The Stickers Keyboard component enables sticker selection:
  • Category Tabs: Stickers are organized into categories displayed as tabs with icon previews
  • Grid Layout: Stickers within each category are displayed in a 4-column grid
  • State Management: Handles loading, loaded, empty, and error states
  • Auto Focus: Optionally focuses the first tab when the keyboard opens
  • Focus Trapping: Optionally traps focus within the keyboard for modal-like behavior
  • Keyboard Accessible: Full keyboard navigation including Tab, Arrow keys for grid navigation, Enter/Space to select, and Escape to close
Live Preview — default stickers keyboard preview. Open in Storybook ↗

​
Basic Usage

​
Simple Sticker Picker

import { Component } from '@angular/core';
import {
  CometChatStickersKeyboardComponent,
  StickerClickEvent
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-stickers-demo',
  standalone: true,
  imports: [CometChatStickersKeyboardComponent],
  template: `
    <cometchat-stickers-keyboard
      (stickerClick)="onStickerSelect($event)"
      (closeKeyboard)="onCloseStickers()">
    </cometchat-stickers-keyboard>
  `
})
export class StickersDemoComponent {
  onStickerSelect(event: StickerClickEvent): void {
    console.log('Sticker selected:', event.stickerUrl, event.stickerName);
  }

  onCloseStickers(): void {
    console.log('Sticker keyboard closed');
  }
}

​
With Custom State Text

import { Component } from '@angular/core';
import {
  CometChatStickersKeyboardComponent,
  StickerClickEvent
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-custom-stickers',
  standalone: true,
  imports: [CometChatStickersKeyboardComponent],
  template: `
    <cometchat-stickers-keyboard
      [errorStateText]="'Unable to load stickers. Please try again.'"
      [emptyStateText]="'No stickers available yet.'"
      [autoFocus]="true"
      [trapFocus]="true"
      (stickerClick)="onStickerSelect($event)"
      (closeKeyboard)="onClose()">
    </cometchat-stickers-keyboard>
  `
})
export class CustomStickersComponent {
  onStickerSelect(event: StickerClickEvent): void {
    console.log('Selected:', event.stickerName);
  }

  onClose(): void {
    // Handle keyboard close
  }
}

​
Properties

PropertyTypeDefaultDescription
errorStateTextstringundefinedCustom text displayed when stickers fail to load. Falls back to a localized default if not provided.
emptyStateTextstringundefinedCustom text displayed when no stickers are available. Falls back to a localized default if not provided.
autoFocusbooleantrueWhether to automatically focus the first category tab when the keyboard opens.
trapFocusbooleantrueWhether to trap focus within the keyboard, preventing Tab from leaving the component. Useful for modal or popover contexts.

​
Events

EventPayload TypeDescription
stickerClickStickerClickEventEmitted when a sticker is clicked. The payload contains stickerUrl (URL of the selected sticker) and stickerName (name of the selected sticker).
closeKeyboardvoidEmitted when the keyboard should close, triggered by pressing the Escape key.

​
StickerClickEvent Interface

interface StickerClickEvent {
  /** URL of the selected sticker */
  stickerUrl: string;
  /** Name of the selected sticker */
  stickerName: string;
}

​
Customization

​
CSS Variables

The Stickers Keyboard component uses BEM-style CSS classes that can be customized with CSS variables: 
/* Keyboard container */
.cometchat-stickers-keyboard {
  background: var(--cometchat-background-color-01);
  border-radius: var(--cometchat-radius-3);
}

/* Category tabs */
.cometchat-stickers-keyboard__tabs {
  gap: var(--cometchat-spacing-1);
  padding: var(--cometchat-spacing-1) var(--cometchat-spacing-2);
  border-bottom: 1px solid var(--cometchat-border-color-light);
}

/* Active tab */
.cometchat-stickers-keyboard__tab--active {
  border-bottom-color: var(--cometchat-primary-color);
}

/* Sticker grid */
.cometchat-stickers-keyboard__grid {
  padding: var(--cometchat-spacing-2);
  gap: var(--cometchat-spacing-2);
}

/* Individual sticker item */
.cometchat-stickers-keyboard__sticker {
  border-radius: var(--cometchat-radius-2);
}

.cometchat-stickers-keyboard__sticker:hover {
  background: var(--cometchat-background-color-03);
}

​
Accessibility

​
Keyboard Navigation

  • Tab: Moves focus between the category tabs and the sticker grid
  • ArrowLeft / ArrowRight: Navigate between category tabs
  • ArrowUp / ArrowDown / ArrowLeft / ArrowRight: Navigate the sticker grid in 2D (4-column layout)
  • Enter / Space: Select the focused sticker, emitting the stickerClick event
  • Escape: Close the keyboard, emitting the closeKeyboard event
  • Focus trapping keeps keyboard navigation within the component when trapFocus is enabled

​
Screen Reader Support

  • Category tabs are announced with their category name
  • Sticker items are announced with their sticker name
  • State changes (loading, error, empty) are announced via the LiveAnnouncerService