> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Action Sheet

> Action Sheet — CometChat documentation.

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](/web-elements/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="JavaScript">
    ```javascript theme={null}
    import '@cometchat/uikit-elements';//import the web component package.
    import { layoutType } from '@cometchat/uikit-elements';


    const action = new CometChatActionItem({id: "attach-file", 
                                            iconURL: "https://img.icons8.com/?size=24&id=37897&format=svg", 
                                            title: "Attach file", 
                                            iconTint: "#e1eb77"});


    const actions = [action];//array of actions
    const title = "Add to chat";
    const layoutModeIconURL = "https://img.icons8.com/?size=24&id=103980&format=svg";

    //use the component
    <cometchat-action-sheet 
    actions={actions}
    hideLayoutMode={false} 
    layoutMode={layoutType.grid}
    title={title}
    layoutModeIconURL={layoutModeIconURL}>
    </cometchat-action-sheet>
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.