---
url: "https://vueda.dev/v3/reference/api/vue/UserAvatar.md"
title: "UserAvatar"
---

# UserAvatar

## Overview

Initials chip representing a user. Composed by `SidebarUserBlock` at 32 px
and `ViewHistoryList`'s history-user column at 22 px. Initials-only for now;
a `src` photo prop is reserved for a later iteration.

Initials algorithm: when `name` has two or more whitespace-separated tokens,
uses the first character of the first and last tokens. Otherwise uses the
first two characters of the single token. Always uppercased. An explicit
`initials` prop, when set, takes precedence and is uppercased verbatim.

Theme entry: [UserAvatar](/v3/reference/theming/keys/UserAvatar.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-name">name</span> | `string` |  | `""` | Full name; used to derive initials when `initials` is not provided. |
| <span id="prop-initials">initials</span> | `string` |  | `undefined` | Explicit initials; takes precedence over derivation from `name`. |
| <span id="prop-size">size</span> | `number` |  | `32` | Pixel size of the chip (width and height). |
| <span id="prop-tone">tone</span> | `('primary'\|'sidebar')` |  | `"primary"` | Color tone. |
| <span id="prop-class">class</span> | `import('vue').HTMLAttributes['class']` |  | `undefined` | Additional CSS classes applied to the root. |

## Source

`client/lib/display/avatar/UserAvatar.vue`