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

# LiveStatus

> Live state badge for experience embeds, typically passed to the `badge` slot of `ChatEmbed`.

```tsx theme={null}
import { LiveStatus } from "@fanvue/ui";
import type { LiveStatusProps, LiveStatusVariant } from "@fanvue/ui";
```

## Examples

## Custom Label

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

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

<LiveStatus variant="live">EN DIRECT</LiveStatus>
```

## Live

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

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

<LiveStatus variant="live" />
```

## Ended

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

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

<LiveStatus variant="ended" />
```

## Props

## LiveStatus

Live state badge for experience embeds, typically passed to the `badge` slot of `ChatEmbed`. `live` uses the live gradient and glow, `ended` a flat surface. The label defaults per variant; pass `children` to localise it.

<ParamField path="variant" type="&#x22;live&#x22; | &#x22;ended&#x22;" default="live">
  State shown by the badge.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `LiveStatusProps`, `LiveStatusVariant`.

***

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.