# OnlineIndicator

`OnlineIndicator` renders a small circular dot indicating a user's online or offline presence status. It is used internally by [`UserAvatar`](/chat/docs/sdk/react-native/ui-components/base-ui/user-avatar/) and [`UserAvatarGroup`](/chat/docs/sdk/react-native/ui-components/base-ui/avatar-group/) to overlay presence information on avatars.

The indicator color is green when online and grey when offline, both sourced from the theme's semantic tokens.

## Usage

```tsx
import { OnlineIndicator } from "stream-chat-react-native";

<OnlineIndicator online={true} size="md" />;
```

## Props

| Prop                | Description                                                                                                                                        | Type                                 |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
| `online` (required) | Whether the user is currently online. Controls the background color of the indicator.                                                              | `boolean`                            |
| `size` (required)   | The size of the indicator dot. Size mapping: `'xl'` (16x16, border 2), `'lg'` (14x14, border 2), `'md'` (12x12, border 2), `'sm'` (8x8, border 1). | `'xl'` \| `'lg'` \| `'md'` \| `'sm'` |


---

This page was last updated at 2026-04-20T08:51:07.036Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/online-indicator/](https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/online-indicator/).