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

# 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-llms-scoped-indexes/yGOD4hG5x8gw_zqp/images/73c6a099-1644912063-120ed7b863f6971adb23040c58588037.gif?s=77ee1cc82e7833aa5ac6a3209c3ffa18" 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>


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