User – Once UI

User is a compact component used to represent a user or persona. It combines an avatar, primary name, optional subline, and a status or role tag.

User

Lorant One

Admin

Design Engineer

<User
  name="Lorant One"
  subline="Design Engineer"
  tagProps={{ label: "Admin", variant: "accent" }}
  avatarProps={{ src: "/images/avatar.jpg" }}
/>

Loading

Display skeletons with the loading prop to show a graceful placeholder before data is available.

<User loading name="Lorant One" subline="Design Engineer" />

Custom content

You can override the default layout using children. This is useful for inline customization (e.g. badges, quick actions).

Custom content

QuasarCyberforge

<User avatarProps={{ value: "Q" }}>
  <Column paddingX="8">
    <Text variant="label-default-m">
      Quasar
    </Text>
    <Text variant="body-default-xs" onBackground="neutral-weak">
      Cyberforge
    </Text>
  </Column>
</User>

API reference

Prop	Type	Default
name	string	—
children	React.ReactNode	—
subline	React.ReactNode	—
tag Short label shown next to the name.	string	—
tagProps	TagProps	{}
loading	boolean	false
avatarProps	AvatarProps	{}
className	string	—
style	React.CSSProperties	—