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

# UserDisplayName

> Renders a user's display name with optional ambassador/verified badges and an online-status indicator.

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

## Examples

## Default

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

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

<UserDisplayName className="typography-body-small-14px-semibold">Aitana Lopez</UserDisplayName>
```

## Online Status

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

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

<UserDisplayName
  className="typography-body-small-14px-semibold"
  showOnlineStatus
>
  Aitana Lopez
</UserDisplayName>
```

## Truncated

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

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

<UserDisplayName className="typography-body-small-14px-semibold">Aitana Lopez de la Vega Hernández Rodríguez del Castillo</UserDisplayName>
```

## Ambassador

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

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

<UserDisplayName className="typography-body-small-14px-semibold" ambassador>Aitana Lopez</UserDisplayName>
```

## Ambassador With Online Status

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

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

<UserDisplayName
  className="typography-body-small-14px-semibold"
  ambassador
  showOnlineStatus
>
  Aitana Lopez
</UserDisplayName>
```

## Props

## UserDisplayName

Renders a user's display name with optional ambassador/verified badges and an online-status indicator. Only the name shrinks and truncates; trailing badges and the online-status indicator stay visible on the same line.

Typography is not baked in: pass a `typography-*` utility via `className` on the root and the name inherits it. Use `typography-body-small-14px-semibold` for the standard display-name scale.

When both `ambassador` and `verified` are set, the ambassador badge takes precedence. `aiDisclosure` is independent of both and renders after whichever status badge is shown, since it discloses how the account is operated rather than ranking it.

The verified and AI-disclosure badges inherit the name's colour, so setting a colour on the root tints them with it. That keeps them legible on surfaces that fix their own text colour — over a cover image, for example, where a theme-dependent tint would turn black against white text in light mode.

The ambassador tint is deliberately not inherited: it uses `text-success-content` (not `text-icons-brand-green`) so the green darkens in light mode and lightens in dark mode, matching `ProfileOnlineStatus`; `text-icons-brand-green` is fixed across modes.

<ParamField path="aiDisclosure" type="boolean">
  Render an AI-disclosure badge after the name, alongside any status badge.
</ParamField>

<ParamField path="aiDisclosureLabel" type="string" default="AI creator">
  Accessible label for the AI-disclosure badge.
</ParamField>

<ParamField path="ambassador" type="boolean">
  Render an ambassador badge after the name.
</ParamField>

<ParamField path="ambassadorLabel" type="string" default="Ambassador">
  Accessible label for the ambassador badge.
</ParamField>

<ParamField path="component" type="&#x22;div&#x22; | &#x22;h2&#x22; | &#x22;h3&#x22; | &#x22;p&#x22; | &#x22;span&#x22; | &#x22;h1&#x22;" default="span">
  HTML element used for the root wrapper.
</ParamField>

<ParamField path="noWrap" type="boolean" default="true">
  Truncate the display name on a single line.
</ParamField>

<ParamField path="onlineLabel" type="string" default="Online">
  Accessible label for the online-status indicator.
</ParamField>

<ParamField path="showOnlineStatus" type="boolean" default="false">
  Render the inline online-status indicator after the name.
</ParamField>

<ParamField path="verified" type="boolean">
  Render a verified badge after the name (ignored when `ambassador` is set).
</ParamField>

<ParamField path="verifiedLabel" type="string" default="Verified">
  Accessible label for the verified badge.
</ParamField>

## Exported types

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

***

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