> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Action Sheet

## Overview

`CometChatActionSheet` is a component which presents options in a list and grid mode as per user's choice. By default, `CometChatActionSheet` is an integrated into `CometChatMessageComposer` to allow users to send multiple types of media and custom messages.

***

This element is a slide-up pane for presenting the user with a set of actions.

## Properties

| Name              | Type                                                              | Description                                                |
| ----------------- | ----------------------------------------------------------------- | ---------------------------------------------------------- |
| title             | string                                                            | Heading text of the element                                |
| actions           | [ActionItem](/web-shared/actionitem)\[]                           | List of actions / options to be made available to the user |
| layoutMode        | Enum \{grid,list}                                                 | Types of display modes supported                           |
| layoutModeIconURL | string                                                            | Asset URL for the toggle mode icon                         |
| hideLayoutMode    | boolean                                                           | When set to true, hides the button that toggles the layout |
| actionSheetStyle  | [ActionSheetStyle](/ui-kit/angular/action-sheet#actionsheetstyle) | Styling properties and values of the element               |

## ActionSheetStyle

Styling properties and values of the element

| Name                     | Description                                                                                                                                                                          |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| width                    | Sets the width of the element                                                                                                                                                        |
| height                   | Sets the height of the element                                                                                                                                                       |
| border                   | Sets the border of the element                                                                                                                                                       |
| borderRadius             | Sets the border radius of the element                                                                                                                                                |
| background               | Sets all background style properties at once, such as color, image, origin and size, or repeat method. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| layoutModeIconTint       | Sets the tint or color applied to the layout mode indicator icon of the element                                                                                                      |
| titleFont                | Sets all the different properties of font for the heading text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                              |
| titleColor               | Sets the foreground color of the heading text.                                                                                                                                       |
| ActionSheetSeparatorTint | Sets the tint of color to the separator displayed in the element                                                                                                                     |

## Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <!--use the component-->
    <cometchat-action-sheet 
    [actions]="actions" 
    [hideLayoutMode]="false"
    [layoutMode]="layoutMode"
    [title]="'your custom title'"
    [layoutModeIconURL]="myCustomIcon"
    ></cometchat-action-sheet>
    ```
  </Tab>

  <Tab title="JavaScript">
    ```js theme={null}

    action = new CometChatActionItem({id: "attach-file", 
    iconURL: icon, 
    title: "Attach file", 
    iconTint: "red"});

    actions = [this.action];
    layoutMode = layoutType.grid;
    const layoutModeIconURL = "https://img.icons8.com/?size=24&id=103980&format=svg";
    ```
  </Tab>
</Tabs>