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

# ProfileStatus

> Presence indicator showing whether a creator or fan is currently active.

```tsx theme={null}
import { ProfileStatus } from "@fanvue/ui";
import type { ProfileStatusProps, ProfileStatusSize } from "@fanvue/ui";
```

## Examples

## Active

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

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

<ProfileStatus active />
```

## Small

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

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

<ProfileStatus active size="sm" />
```

## With Label

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

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

<ProfileStatus active aria-label="Online" />
```

## All States

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

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

<div className="flex items-center gap-6">
  <div className="flex items-center gap-3">
    <ProfileStatus active size="sm" />
    <ProfileStatus active size="md" />
  </div>
  <div className="flex items-center gap-3">
    <ProfileStatus active={false} size="sm" />
    <ProfileStatus active={false} size="md" />
  </div>
</div>
```

## Inactive

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

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

<ProfileStatus active={false} />
```

## Props

## ProfileStatus

Presence indicator showing whether a creator or fan is currently active. The active state pulses to signal real-time presence; the inactive state is a static, muted dot for lists, tables, and content views where presence is less relevant.

Decorative by default (`aria-hidden`) — pair it with a visible or visually hidden label at the usage site. Pass `aria-label` to expose it as a standalone image to assistive technology.

Supersedes the V1 `OnlineBlinkingIcon`: `<ProfileStatus />` is a drop-in replacement for `<OnlineBlinkingIcon />`, adding the distinct inactive state.

<ParamField path="active" type="boolean" default="true">
  Whether the profile is currently active. Active renders a pulsing green dot; inactive renders a static grey dot.
</ParamField>

<ParamField path="size" type="&#x22;md&#x22; | &#x22;sm&#x22;" default="sm">
  Size preset of the indicator.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `ProfileStatusProps`, `ProfileStatusSize`.

***

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