Examples
Default
Online Status
Truncated
Ambassador
Ambassador With Online Status
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 atypography-* 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.
boolean
Render an AI-disclosure badge after the name, alongside any status badge.
string
default:"AI creator"
Accessible label for the AI-disclosure badge.
boolean
Render an ambassador badge after the name.
string
default:"Ambassador"
Accessible label for the ambassador badge.
"div" | "h2" | "h3" | "p" | "span" | "h1"
default:"span"
HTML element used for the root wrapper.
boolean
default:"true"
Truncate the display name on a single line.
string
default:"Online"
Accessible label for the online-status indicator.
boolean
default:"false"
Render the inline online-status indicator after the name.
boolean
Render a verified badge after the name (ignored when
ambassador is set).string
default:"Verified"
Accessible label for the verified badge.
Exported types
Also exported from@fanvue/ui: UserDisplayNameProps.
Setup: Installation · Theming