Toast

Temporary notification component for displaying feedback messages with auto-dismiss, close button, and Escape key dismissal.

AI Integration Quick Reference

{
  "component": "CometChatToast",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatToast } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Temporary notification for displaying feedback messages with auto-dismiss, close button, and Escape key dismissal.",
  "cssRootClass": ".cometchat-toast",
  "primaryOutput": {
    "prop": "onClose",
    "type": "() => void"
  },
  "props": {
    "data": {
      "text": { "type": "string", "required": true },
      "duration": { "type": "number", "default": "3000", "note": "0 = no auto-dismiss" },
      "showCloseButton": { "type": "boolean", "default": "true" },
      "dismissOnEscape": { "type": "boolean", "default": "true" }
    },
    "callbacks": {
      "onClose": "() => void"
    }
  },
  "events": [],
  "sdkListeners": [],
  "types": {}
}

Where It Fits

CometChatToast is a base notification component used to display temporary feedback messages. It is used internally by components like CometChatMessageComposer (copy confirmation), CometChatMessageList (action feedback), and can be used directly by consumers for custom notifications.

The parent controls the toast lifecycle by conditionally rendering it and responding to the onClose callback to unmount.

import { useState } from "react";
import { CometChatToast } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function MessageActions() {
  const [toast, setToast] = useState<string | null>(null);

  const handleCopy = () => {
    navigator.clipboard.writeText("...");
    setToast("Message copied to clipboard");
  };

  return (
    <>
      <button onClick={handleCopy}>Copy</button>
      {toast && (
        <CometChatToast
          text={toast}
          duration={3000}
          onClose={() => setToast(null)}
        />
      )}
    </>
  );
}

---

Minimal Render

import { CometChatToast } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function ToastDemo() {
  return <CometChatToast text="Hello world" />;
}

export default ToastDemo;

Root CSS class: .cometchat-toast

---

Actions and Events

Callback Props

onClose

Fires when the toast is dismissed — whether by auto-dismiss timer, close button click, or Escape key. The parent should respond by unmounting the toast.

import { useState } from "react";
import { CometChatToast } from "@cometchat/chat-uikit-react";

function ToastWithHandler() {
  const [visible, setVisible] = useState(true);
  return visible ? (
    <CometChatToast
      text="Action completed"
      duration={3000}
      onClose={() => setVisible(false)}
    />
  ) : null;
}

The onClose callback is guaranteed to fire at most once per toast instance, even if multiple dismiss triggers overlap (e.g., Escape key pressed right before auto-dismiss timer fires).

---

Common Patterns

Auto-dismiss toast

import { useState } from "react";
import { CometChatToast } from "@cometchat/chat-uikit-react";

function AutoDismissToast() {
  const [visible, setVisible] = useState(true);
  return visible ? (
    <CometChatToast
      text="This disappears in 3 seconds"
      duration={3000}
      onClose={() => setVisible(false)}
    />
  ) : null;
}

Persistent toast (parent-controlled dismissal)

Setting duration to 0 with showCloseButton and dismissOnEscape both false creates a toast that persists until the parent unmounts it. This is useful for status indicators like “Reconnecting…” or “Offline”.

import { CometChatToast } from "@cometchat/chat-uikit-react";

function ConnectionStatus({ isOffline }: { isOffline: boolean }) {
  return isOffline ? (
    <CometChatToast
      text="You are offline. Reconnecting..."
      duration={0}
      showCloseButton={false}
      dismissOnEscape={false}
    />
  ) : null;
}

Toast without close button

import { CometChatToast } from "@cometchat/chat-uikit-react";

function MinimalToast() {
  return (
    <CometChatToast
      text="Press Escape to dismiss"
      duration={0}
      showCloseButton={false}
    />
  );
}

---

CSS Architecture

The component uses CSS custom properties (design tokens) defined in @cometchat/chat-uikit-react/css-variables.css. The cascade:

1. Global tokens set on the .cometchat root wrapper.
2. Component CSS (.cometchat-toast) consumes these tokens via var().
3. Overrides target .cometchat-toast descendant selectors.

Key Selectors

Target	Selector
Root	.cometchat-toast
Content wrapper	.cometchat-toast__content
Text	.cometchat-toast__text
Close button	.cometchat-toast__close
Close icon	.cometchat-toast__close-icon

Example: Custom-styled toast

.cometchat .cometchat-toast {
  background: #1e40af;
  border-radius: 8px;
}

.cometchat .cometchat-toast .cometchat-toast__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

Customization Matrix

What to change	Where	Property/API	Example
Handle dismissal	Component props	onClose callback	onClose={() => setVisible(false)}
Set auto-dismiss time	Component props	duration	duration={5000}
Disable auto-dismiss	Component props	duration	duration={0}
Show/hide close button	Component props	showCloseButton	showCloseButton={false}
Enable/disable Escape	Component props	dismissOnEscape	dismissOnEscape={false}
Change colors, shape	Global CSS	.cometchat-toast selectors	See example above

---

Props

---

text

The message text to display. Renders nothing when empty.

Type	string
Required	Yes

---

className

Custom CSS class applied to the root element.

Type	string
Default	undefined

---

dismissOnEscape

Whether pressing Escape dismisses the toast.

Type	boolean
Default	true

---

duration

Duration in milliseconds before auto-dismiss. Set to 0 to disable auto-dismiss.

Type	number
Default	3000

---

onClose

Callback fired when the toast is dismissed (auto-dismiss, close button, or Escape key).

Type	() => void
Default	undefined

---

showCloseButton

Whether to show the close button for manual dismissal.

Type	boolean
Default	true

---

CSS Selectors

Target	Selector
Root (fixed bottom-center)	.cometchat-toast
Content wrapper	.cometchat-toast__content
Text	.cometchat-toast__text
Close button	.cometchat-toast__close
Close button hover	.cometchat-toast__close:hover
Close button focus	.cometchat-toast__close:focus-visible
Close icon	.cometchat-toast__close-icon