Fanvue API Documentation

import { ProfileStatus } from "@fanvue/ui";
import type { ProfileStatusProps, ProfileStatusSize } from "@fanvue/ui";

Examples

Active

import { ProfileStatus } from "@fanvue/ui";

<ProfileStatus active />

Small

import { ProfileStatus } from "@fanvue/ui";

<ProfileStatus active size="sm" />

With Label

import { ProfileStatus } from "@fanvue/ui";

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

All States

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

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.

boolean

default:"true"

Whether the profile is currently active. Active renders a pulsing green dot; inactive renders a static grey dot.

"md" | "sm"

default:"sm"

Size preset of the indicator.

Exported types

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

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

ProfileStatus

Examples

Active

Small

With Label

All States

Inactive

Props

ProfileStatus

Exported types

​Examples

​Active

​Small

​With Label

​All States

​Inactive

​Props

​ProfileStatus

​Exported types

Examples

Active

Small

With Label

All States

Inactive

Props

ProfileStatus

Exported types