Action Sheet - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatActionSheet",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatActionSheet } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "A modal overlay that presents a list or grid of contextual actions the user can take.",
  "cssRootClass": ".cometchat-action-sheet",
  "subComponents": ["Root", "Header", "Layout", "Item"],
  "props": {
    "Root": {
      "isOpen": { "type": "boolean", "default": "false" },
      "onClose": { "type": "() => void", "default": "undefined" },
      "layoutMode": { "type": "'list' | 'grid'", "default": "'list'" },
      "title": { "type": "string", "default": "undefined", "description": "Optional title displayed in the header." },
      "className": { "type": "string", "default": "undefined" },
      "children": { "type": "ReactNode", "default": "undefined" }
    },
    "Header": {
      "title": { "type": "string", "default": "undefined" },
      "onClose": { "type": "() => void", "default": "undefined" },
      "children": { "type": "ReactNode", "default": "undefined" }
    },
    "Layout": {
      "mode": { "type": "'list' | 'grid'", "default": "'list'" },
      "children": { "type": "ReactNode", "default": "undefined" }
    },
    "Item": {
      "item": { "type": "CometChatActionSheetItemData", "default": "undefined", "note": "Required." },
      "className": { "type": "string", "default": "undefined" }
    }
  },
  "types": {
    "CometChatActionSheetItemData": {
      "id": "string",
      "title": "string",
      "icon": "ReactNode (optional)",
      "onClick": "() => void",
      "subtitle": "string (optional)",
      "disabled": "boolean (optional)",
      "className": "string (optional)"
    },
    "CometChatActionSheetLayoutMode": "'list' | 'grid'",
    "CometChatActionSheetContextValue": {
      "isOpen": "boolean",
      "onClose": "() => void",
      "layoutMode": "CometChatActionSheetLayoutMode"
    }
  }
}

Where It Fits

CometChatActionSheet is a base component used by higher-level components like CometChatMessageComposer to present attachment options, and by CometChatContextMenu for contextual actions. It renders as a modal overlay with a backdrop, focus trap, and keyboard navigation.

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

const actions = [
  { id: "image", title: "Attach Image", icon: <ImageIcon />, onClick: () => console.log("image") },
  { id: "video", title: "Attach Video", icon: <VideoIcon />, onClick: () => console.log("video") },
  { id: "file", title: "Attach File", icon: <FileIcon />, onClick: () => console.log("file") },
];

function ComposerWithSheet() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(true)}>Attach</button>
      <CometChatActionSheet.Root isOpen={open} onClose={() => setOpen(false)}>
        <CometChatActionSheet.Header title="Attach" onClose={() => setOpen(false)} />
        <CometChatActionSheet.Layout mode="list">
          {actions.map((a) => (
            <CometChatActionSheet.Item key={a.id} item={a} />
          ))}
        </CometChatActionSheet.Layout>
      </CometChatActionSheet.Root>
    </div>
  );
}

Minimal Render

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

function Demo() {
  return (
    <CometChatActionSheet.Root isOpen={true} onClose={() => {}}>
      <CometChatActionSheet.Layout>
        <CometChatActionSheet.Item
          item={{ id: "1", title: "Action", onClick: () => {} }}
        />
      </CometChatActionSheet.Layout>
    </CometChatActionSheet.Root>
  );
}

Root CSS class: .cometchat-action-sheet

Sub-Components

CometChatActionSheet is a compound component with four sub-components:

Sub-component	Purpose
`Root`	Modal overlay container. Provides context, backdrop, focus trap, and keyboard handling.
`Header`	Optional header bar with title and close button.
`Layout`	Arranges items in `list` (vertical) or `grid` (icon grid) mode.
`Item`	A single action rendered as a button.

Root

The outermost wrapper. Controls open/close state, renders the backdrop, traps focus, and handles Escape, ArrowUp/ArrowDown, Home/End key navigation.

<CometChatActionSheet.Root isOpen={open} onClose={() => setOpen(false)}>
  {/* Header, Layout, and Items go here */}
</CometChatActionSheet.Root>

Renders a title and optional close button. Pass children for fully custom header content.

<CometChatActionSheet.Header title="Choose an action" onClose={() => setOpen(false)} />

Layout

Arranges child items. Defaults to list mode (vertical stack). Set mode="grid" for an icon grid.

List mode
Grid mode

<CometChatActionSheet.Layout mode="list">
  <CometChatActionSheet.Item item={action1} />
  <CometChatActionSheet.Item item={action2} />
</CometChatActionSheet.Layout>

<CometChatActionSheet.Layout mode="grid">
  <CometChatActionSheet.Item item={action1} />
  <CometChatActionSheet.Item item={action2} />
</CometChatActionSheet.Layout>

Item

Renders a single action as a <button>. Displays icon, title, and optional subtitle (subtitle hidden in grid mode). Disabled items show reduced opacity and are not clickable.

<CometChatActionSheet.Item
  item={{
    id: "image",
    title: "Attach Image",
    icon: <ImageIcon />,
    onClick: () => handleAttach("image"),
    subtitle: "JPG, PNG, GIF",
    disabled: false,
  }}
/>

Common Patterns

Grid mode with header

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

function GridSheet({ actions, open, onClose }) {
  return (
    <CometChatActionSheet.Root isOpen={open} onClose={onClose} layoutMode="grid">
      <CometChatActionSheet.Header title="Share" onClose={onClose} />
      <CometChatActionSheet.Layout mode="grid">
        {actions.map((a) => (
          <CometChatActionSheet.Item key={a.id} item={a} />
        ))}
      </CometChatActionSheet.Layout>
    </CometChatActionSheet.Root>
  );
}

Conditionally disabled items

const actions = [
  { id: "image", title: "Image", onClick: handleImage },
  { id: "video", title: "Video", onClick: handleVideo, disabled: !hasCamera },
  { id: "file", title: "File", onClick: handleFile },
];

Custom header content

<CometChatActionSheet.Header>
  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
    <CustomIcon />
    <span>My Custom Header</span>
  </div>
</CometChatActionSheet.Header>

The action sheet is fully keyboard-accessible:

Key	Behavior
`Tab`	Moves focus to the next focusable element (trapped within the sheet)
`Shift+Tab`	Moves focus to the previous focusable element (wraps around)
`Escape`	Closes the sheet and returns focus to the trigger element
`ArrowDown`	Moves focus to the next item (wraps from last to first)
`ArrowUp`	Moves focus to the previous item (wraps from first to last)
`Home`	Moves focus to the first item
`End`	Moves focus to the last item
`Enter` / `Space`	Activates the focused item (native button behavior)

When the sheet opens, focus automatically moves to the first focusable element inside it. When it closes, focus returns to the element that had focus before the sheet opened.

CSS Architecture

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

Global tokens set on the .cometchat root wrapper.
Component CSS (.cometchat-action-sheet) consumes these tokens via var().
Overrides target .cometchat-action-sheet descendant selectors.

Key Selectors

Target	Selector
Root container	`.cometchat-action-sheet`
Backdrop overlay	`.cometchat-action-sheet__backdrop`
Header bar	`.cometchat-action-sheet__header`
Header title	`.cometchat-action-sheet__header-title`
Close button	`.cometchat-action-sheet__header-close-button`
List layout	`.cometchat-action-sheet__layout-list`
Grid layout	`.cometchat-action-sheet__layout-grid`
Item (list mode)	`.cometchat-action-sheet__item`
Item (grid mode)	`.cometchat-action-sheet__item--grid`
Item icon	`.cometchat-action-sheet__item-icon`
Item title	`.cometchat-action-sheet__item-title`
Item subtitle	`.cometchat-action-sheet__item-subtitle`

Example: Brand-themed action sheet

App.css

.cometchat-action-sheet {
  border-radius: 12px;
  border-color: var(--brand-border);
}

.cometchat-action-sheet__header {
  background: var(--brand-surface);
}

.cometchat-action-sheet__item:hover:not(:disabled) {
  background: var(--brand-hover);
}

Customization Matrix

What to change	Where	Property/API	Example
Open/close state	Component props	`isOpen`, `onClose` on `Root`	`<Root isOpen={open} onClose={close}>`
Layout mode	Component props	`mode` on `Layout`, `layoutMode` on `Root`	`<Layout mode="grid">`
Header content	Component props	`title`, `onClose`, `children` on `Header`	`<Header title="Actions">`
Disable an item	Item data	`disabled` on `CometChatActionSheetItemData`	`{ disabled: true }`
Change visual styling	Global CSS	`.cometchat-action-sheet` selectors	See example above

Props

All props are optional unless noted otherwise.

CometChatActionSheet.Root

isOpen

Whether the action sheet is visible. When false, the component renders nothing.


Type	`boolean`
Default	`false`

Required.

onClose

Called when the user clicks the backdrop, presses Escape, or triggers a close action.


Type	`() => void`
Default	`undefined`

Required.

layoutMode

Sets the layout mode passed to context. Sub-components like Item read this to apply grid or list styling.


Type	`'list' \| 'grid'`
Default	`'list'`

title

Optional title displayed in the header. When provided, the Root renders a built-in header with this title text.


Type	`string`
Default	`undefined`

className

Custom CSS class appended to the root container.


Type	`string`
Default	`undefined`

children

Content rendered inside the dialog. Typically Header, Layout, and Item sub-components.


Type	`ReactNode`
Default	`undefined`

Required.

CometChatActionSheet.Header

title

Text displayed as the header title.


Type	`string`
Default	`undefined`

onClose

Callback for the close button. If omitted, no close button is rendered.


Type	`() => void`
Default	`undefined`

children

Custom header content. When provided, replaces the default title + close button layout.


Type	`ReactNode`
Default	`undefined`

CometChatActionSheet.Layout

mode

Arrangement of child items.


Type	`'list' \| 'grid'`
Default	`'list'`

children

The Item sub-components to render.


Type	`ReactNode`
Default	`undefined`

CometChatActionSheet.Item

item

The action item data object.


Type	`CometChatActionSheetItemData`
Default	`undefined`

Required.

interface CometChatActionSheetItemData {
  id: string;
  title: string;
  icon?: ReactNode;
  onClick: () => void;
  subtitle?: string;
  disabled?: boolean;
  className?: string;
}

className

Custom CSS class appended to the item button.


Type	`string`
Default	`undefined`

CSS Selectors

Target	Selector
Root	`.cometchat-action-sheet`
Backdrop	`.cometchat-action-sheet__backdrop`
Header	`.cometchat-action-sheet__header`
Header title	`.cometchat-action-sheet__header-title`
Header close button	`.cometchat-action-sheet__header-close-button`
List layout	`.cometchat-action-sheet__layout-list`
Grid layout	`.cometchat-action-sheet__layout-grid`
Item (list)	`.cometchat-action-sheet__item`
Item (grid)	`.cometchat-action-sheet__item--grid`
Item icon	`.cometchat-action-sheet__item-icon`
Item title	`.cometchat-action-sheet__item-title`
Item subtitle	`.cometchat-action-sheet__item-subtitle`

Documentation Index

​Where It Fits

​Minimal Render

​Sub-Components

​Root

​Header

​Layout

​Item

​Common Patterns

​Grid mode with header

​Conditionally disabled items

​Custom header content

​Keyboard Navigation

​CSS Architecture

​Key Selectors

​Example: Brand-themed action sheet

​Customization Matrix

​Props

​CometChatActionSheet.Root

​isOpen

​onClose

​layoutMode

​title

​className

​children

​CometChatActionSheet.Header

​title

​onClose

​children

​CometChatActionSheet.Layout

​mode

​children

​CometChatActionSheet.Item

​item

​className

​CSS Selectors

Where It Fits

Minimal Render

Sub-Components

Root

Header

Layout

Item

Common Patterns

Grid mode with header

Conditionally disabled items

Custom header content

Keyboard Navigation

CSS Architecture

Key Selectors

Example: Brand-themed action sheet

Customization Matrix

Props

CometChatActionSheet.Root

isOpen

onClose

layoutMode

title

className

children

CometChatActionSheet.Header

title

onClose

children

CometChatActionSheet.Layout

mode

children

CometChatActionSheet.Item

item

className

CSS Selectors