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

# MediaStatusIndicator

> A compact circular indicator that surfaces the moderation state of a piece of media — flagged, removed, or sensitive.

```tsx theme={null}
import { MediaStatusIndicator } from "@fanvue/ui";
import type { MediaStatusIndicatorProps, MediaStatusIndicatorStatus } from "@fanvue/ui";
```

## Examples

## Default

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

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

<MediaStatusIndicator status="default" />
```

## All Statuses

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

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

<div className="flex items-center gap-4">
  <MediaStatusIndicator status="default" />
  <MediaStatusIndicator status="removed" />
  <MediaStatusIndicator status="sensitive" />
</div>
```

## Removed

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

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

<MediaStatusIndicator status="removed" />
```

## Sensitive

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

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

<MediaStatusIndicator status="sensitive" />
```

## Overlaid on a thumbnail

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-mediastatusindicator--on-media&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="220" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="MediaStatusIndicator — Overlaid on a thumbnail" />
</Frame>

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

<div className="relative size-40 overflow-hidden rounded-lg bg-neutral-800">
  <div className="absolute top-2 right-2">
    <MediaStatusIndicator status="sensitive" />
  </div>
</div>
```

## Props

## MediaStatusIndicator

A compact circular indicator that surfaces the moderation state of a piece of media — flagged, removed, or sensitive. Typically overlaid on a thumbnail or attachment.

Renders as `role="img"` with a descriptive `aria-label`; the inner glyph is decorative.

<ParamField path="label" type="string">
  Accessible label announced by assistive tech. Defaults to a per-status description; pass your own for localisation or extra context.
</ParamField>

<ParamField path="status" type="&#x22;default&#x22; | &#x22;removed&#x22; | &#x22;sensitive&#x22;" default="default">
  Which media state to represent.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `MediaStatusIndicatorProps`, `MediaStatusIndicatorStatus`.

***

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