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

# Receipt

> Receipt — CometChat documentation.

The CometChatReceipt component renders the receipts such as sending, sent, delivered, read and error state indicator of a message.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/gyecNxNCJ22EeSIH/images/f82a1b5b-a1w8ok8jbsn50ui54tdfv1qqk5yregcweimaoo5kdk2eymhorifbpx6ksagig4g7-c4c6ce1ea172a4f9d33782a390b4aeee.png?fit=max&auto=format&n=gyecNxNCJ22EeSIH&q=85&s=9d97aa0a68853ae9e504cddac96b0371" width="509" height="472" data-path="images/f82a1b5b-a1w8ok8jbsn50ui54tdfv1qqk5yregcweimaoo5kdk2eymhorifbpx6ksagig4g7-c4c6ce1ea172a4f9d33782a390b4aeee.png" />
</Frame>

## Properties

| Name | Type | Description |
| - | - | - |
| waitIcon | string | Asset URL for the wait icon |
| sentIcon | string | Asset URL for the sent icon |
| deliveredIcon | string | Asset URL for the delivered icon |
| readIcon | string | Asset URL for the read icon |
| errorIcon | string | Asset URL for the error icon |
| receipt | [Receipts](/web-shared/receipts) | Group of constants representing the various receipt status |

## ReceiptStyle

| Name | Description |
| - | - |
| waitIconTint | Sets the color applied to the wait icon |
| sentIconTint | Sets the color applied to the sent icon |
| deliveredIconTint | Sets the color applied to the delivered icon |
| readIconTint | Sets the color applied to the read icon |
| errorIconTint | Sets the color applied to the error icon |

## Usage

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import '@cometchat/uikit-elements'; //import the web elements package
    import { receipts } from '@cometchat/uikit-elements'; //import the receipts enum constant

    //display the wait status icon
    //use the element
    <cometchat-receipt 
    waitIcon="https://cdn-icons-png.flaticon.com/24/661/661562.png" 
    sentIcon="https://cdn-icons-png.flaticon.com/24/1443/1443000.png" deliveredIcon="https://cdn-icons-png.flaticon.com/24/10728/10728652.png" readIcon="https://cdn-icons-png.flaticon.com/24/10728/10728588.png"
    receipt={receipts.wait} 
    errorIcon="https://cdn-icons-png.flaticon.com/24/10207/10207468.png"></cometchat-receipt>
    ```
  </Tab>
</Tabs>


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