> ## 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.

# Status Indicator

> Status Indicator — CometChat documentation.

`CometChatStatusIndicator` is a customized component which indicates whether user is online or offline. You can customize the `borderColor`, `borderSize`, and `backgroundColor` of this component.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/JexqAkK-CH6gZ6Dw/images/917825b6-ltyjb5ctoay86mcws67c02sfyfnsf6ffp68u0oznn0vp6m6f28tlfvdmsmhjxjhe-009bb23d6fec659cca5735a2a1baa79c.png?fit=max&auto=format&n=JexqAkK-CH6gZ6Dw&q=85&s=1826658db3d3f21e8ecb39c2cab89f91" width="1224" height="404" data-path="images/917825b6-ltyjb5ctoay86mcws67c02sfyfnsf6ffp68u0oznn0vp6m6f28tlfvdmsmhjxjhe-009bb23d6fec659cca5735a2a1baa79c.png" />
</Frame>

### Properties

| Name | Type | Description |
| - | - | - |
| backgroundColor | string | Background color of the indicator |
| backgroundImage | string | Background image of the indicator |
| statusIndicatorStyle | Object | Styling properties of the element. |

### Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <!--use the element-->
    <cometchat-status-indicator
    [statusIndicatorStyle]="statusIndicatorStyle"
    ></cometchat-status-indicator>
    ```
  </Tab>

  <Tab title="JavaScript">
    ```js theme={null}
    //styling properties 
    statusIndicatorStyle = {width: "28px",height: "28px", border: "1px solid transparent", borderRadius: "50px" };
    ```
  </Tab>
</Tabs>


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