Button

Base clickable element supporting text, icon, or both, with keyboard activation and accessible labeling for icon-only usage.

AI Integration Quick Reference

{
  "component": "CometChatButton",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatButton } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Base clickable element supporting text, icon, or both, with keyboard activation and accessible labeling for icon-only usage.",
  "cssRootClass": ".cometchat-button",
  "primaryOutput": {
    "prop": "onClick",
    "type": "(event: React.MouseEvent<HTMLButtonElement>) => void"
  },
  "props": {
    "data": {
      "text": { "type": "string", "default": "undefined", "note": "Button label text. At least one of text or iconURL is required." },
      "iconURL": { "type": "string", "default": "undefined", "note": "Icon image source. At least one of text or iconURL is required." },
      "disabled": { "type": "boolean", "default": "false" },
      "variant": { "type": "\"primary\" | \"secondary\" | \"ghost\"", "default": "\"primary\"" }
    },
    "callbacks": {
      "onClick": "(event: React.MouseEvent<HTMLButtonElement>) => void"
    }
  },
  "events": [],
  "sdkListeners": [],
  "types": {}
}

Where It Fits

CometChatButton is a base element used throughout the UI Kit for clickable actions — send buttons, attachment triggers, cancel actions, toolbar icons, and dialog confirmations. It renders as a native <button> with built-in keyboard support and focus management.

Feature components like CometChatMessageComposer, CometChatMessageHeader, and CometChatActionSheet use CometChatButton internally for their interactive controls.

---

Minimal Render

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

function ButtonDemo() {
  return <CometChatButton text="Send" />;
}

export default ButtonDemo;

Root CSS class: .cometchat-button

---

Actions and Events

Callback Props

onClick

Fires when the button is activated via mouse click, Enter key, or Space key.

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

function ButtonWithHandler() {
  return (
    <CometChatButton
      text="Confirm"
      onClick={() => console.log("Button activated")}
    />
  );
}

The button supports keyboard activation natively — pressing Enter or Space while focused triggers the onClick handler, matching standard <button> behavior.

---

Common Patterns

Text-only button

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

function TextButton() {
  return <CometChatButton text="Cancel" variant="secondary" />;
}

Icon-only button (requires aria-label)

When rendering a button with only an icon and no visible text, provide an aria-label for screen reader accessibility.

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

function IconButton() {
  return (
    <CometChatButton
      iconURL="/assets/icons/send.svg"
      aria-label="Send message"
      onClick={() => console.log("Send")}
    />
  );
}

Text with icon

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

function TextAndIconButton() {
  return (
    <CometChatButton
      text="Attach"
      iconURL="/assets/icons/attachment.svg"
      variant="ghost"
      onClick={() => console.log("Open attachment picker")}
    />
  );
}

Disabled state

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

function DisabledButtons() {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      <CometChatButton text="Primary" disabled />
      <CometChatButton text="Secondary" variant="secondary" disabled />
      <CometChatButton text="Ghost" variant="ghost" disabled />
    </div>
  );
}

Variant showcase

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

function ButtonVariants() {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      <CometChatButton text="Primary" variant="primary" />
      <CometChatButton text="Secondary" variant="secondary" />
      <CometChatButton text="Ghost" variant="ghost" />
    </div>
  );
}

---

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-button) consumes these tokens via var().
3. Overrides target .cometchat-button descendant selectors.

Key Selectors

Target	Selector
Root	.cometchat-button
Icon element	.cometchat-button__icon
Text label	.cometchat-button__text
Primary variant	.cometchat-button--primary
Secondary variant	.cometchat-button--secondary
Ghost variant	.cometchat-button--ghost
Disabled state	.cometchat-button--disabled
Focus ring	.cometchat-button:focus-visible

Example: Custom branded button

.cometchat .cometchat-button.cometchat-button--primary {
  background-color: #6c47ff;
  border-color: #6c47ff;
}

.cometchat .cometchat-button.cometchat-button--primary:hover {
  background-color: #5a3ad9;
}

Customization Matrix

What to change	Where	Property/API	Example
Handle click	Component props	onClick callback	onClick={() => ...}
Set button text	Component props	text	text="Send"
Add icon	Component props	iconURL	iconURL="/icons/send.svg"
Change variant	Component props	variant	variant="ghost"
Disable interaction	Component props	disabled	disabled={true}
Change colors, shape	Global CSS	.cometchat-button selectors	See example above

---

Props

At least one of text or iconURL must be provided.

---

text

Visible label text rendered inside the button.

Type	string
Default	undefined

---

iconURL

URL of an icon image displayed inside the button. When provided without text, the button renders as an icon-only button.

Type	string
Default	undefined

When using icon-only mode (no text), always provide aria-label for accessibility.

---

onClick

Callback fired when the button is activated (click, Enter, or Space).

Type	(event: React.MouseEvent<HTMLButtonElement>) => void
Default	undefined

---

disabled

Disables the button. Prevents interaction and applies reduced opacity styling.

Type	boolean
Default	false

---

variant

Visual style variant.

Type	"primary" | "secondary" | "ghost"
Default	"primary"

• primary — filled background with brand color, used for primary actions.
• secondary — outlined/muted style, used for secondary actions.
• ghost — transparent background, used for toolbar icons and inline actions.

---

aria-label

Accessible label for the button. Required for icon-only buttons that have no visible text.

Type	string
Default	undefined

---

className

Custom CSS class applied to the root button element.

Type	string
Default	undefined

---

CSS Selectors

Target	Selector
Root	.cometchat-button
Primary variant	.cometchat-button--primary
Secondary variant	.cometchat-button--secondary
Ghost variant	.cometchat-button--ghost
Disabled state	.cometchat-button--disabled
Icon element	.cometchat-button__icon
Text label	.cometchat-button__text
Focus ring	.cometchat-button:focus-visible
Hover state	.cometchat-button:hover
Active/pressed state	.cometchat-button:active