> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# ProfileOnlineStatus

> Inline online-status indicator: a pulsing dot followed by a label.

```tsx theme={null}
import { ProfileOnlineStatus } from "@fanvue/ui";
import type { ProfileOnlineStatusProps } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-profileonlinestatus--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="380" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="ProfileOnlineStatus — Default" />
</Frame>

```tsx theme={null}
import { ProfileOnlineStatus } from "@fanvue/ui";

<ProfileOnlineStatus label="Online" />
```

## Custom Label

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-profileonlinestatus--custom-label&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="380" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="ProfileOnlineStatus — Custom Label" />
</Frame>

```tsx theme={null}
import { ProfileOnlineStatus } from "@fanvue/ui";

<ProfileOnlineStatus label="Active now" />
```

## Inline With Text

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-profileonlinestatus--inline-with-text&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="380" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="ProfileOnlineStatus — Inline With Text" />
</Frame>

```tsx theme={null}
import { ProfileOnlineStatus } from "@fanvue/ui";

<span className="typography-body-small-14px-semibold inline-flex items-center">
  Aitana Lopez
  <ProfileOnlineStatus label="Online" className="ml-2" />
</span>
```

## Props

## ProfileOnlineStatus

Inline online-status indicator: a pulsing dot followed by a label. Used by `UserDisplayName` when `showOnlineStatus` is set.

<ParamField path="label" type="string" default="Online">
  Visible status label rendered next to the indicator.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `ProfileOnlineStatusProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)