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

# Status Indicator

> Status Indicator — CometChat documentation.

`CometChatStatusIndicator` is a component which indicates whether user is online or offline. You can customize the `border` and `background color` of this component.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/73c6a099-1644912063-120ed7b863f6971adb23040c58588037.gif?s=2037a03395485cbefd2003e6265933fb" width="146" height="36" data-path="images/73c6a099-1644912063-120ed7b863f6971adb23040c58588037.gif" />
</Frame>

## How to integrate CometChatStatusIndicator?

Since `CometChatStatusIndicator` is a stateless widget, it can be added directly in the build method. `CometChatStatusIndicator` includes various parameters to customize its UI.

***

#### Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatStatusIndicator(
        backgroundColor: Colors.green,
    );
    ```
  </Tab>
</Tabs>

***

## Properties

| Parameters          | Type                                                        | Description                                              |
| ------------------- | ----------------------------------------------------------- | -------------------------------------------------------- |
| **backgroundImage** | Widget                                                      | used to set the icon in status indicator                 |
| **backgroundColor** | Color                                                       | used to set the background color of the status indicator |
| **style**           | [StatusIndicatorStyle](/ui-kit/flutter/v4/status-indicator) | used to set border of custom style                       |

***

## StatusIndicatorStyle

| Parameters       | Type      | Description                            |
| ---------------- | --------- | -------------------------------------- |
| **borderRadius** | double    | used to set the border radius          |
| **height**       | double    | used to set the height                 |
| **width**        | double    | used to set width                      |
| **border**       | BoxBorder | used to set border of status indicator |
| **gradient**     | Gradient  | used to set a gradient background      |

***

## Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatStatusIndicator(
        backgroundColor: Colors.pink,
        style: StatusIndicatorStyle(
            borderRadius: 24,
            width: 20,
            height: 20,
        )
    );
    ```
  </Tab>
</Tabs>