Avatar

A unified avatar component that displays a person's initials or photo. Colors are automatically derived from the name via a hash function for consistent per-person coloring.

Interactive Playground

PlaygroundInteractive

Size:

Shape:

Show footer label

LK

Luis Kern

<PxAvatar
  name="Luis Kern"
  :size="demoSize"
  :shape="demoShape"
  :label="demoLabel"
/>

Initials (Basic)

Demo

AG

LM

SK

CR

<script setup>
import { PxAvatar } from 'praxis-vue-ui'
</script>

<template>
  <PxAvatar name="Ana García" />
  <PxAvatar name="Luis Martínez" />
</template>

Sizes

Sizes

AG

sm

LM

md

SK

lg

CR

xl

<PxAvatar name="Ana García" size="sm" />
<PxAvatar name="Luis Martínez" size="md" />
<PxAvatar name="Sofia Kim" size="lg" />
<PxAvatar name="Carlos Rivera" size="xl" />

Square Shape

Square

AG

LM

SK

<PxAvatar name="Ana García" shape="square" size="lg" />

With Footer Label

With Label

AG

Ana García

LM

Luis Martínez

SK

Sofia Kim

<PxAvatar name="Ana García" size="xl" :label="true" />

Image Source

With Image

<PxAvatar
  name="Ana García"
  src="https://cdn.example.com/avatars/ana.jpg"
  size="lg"
/>
<!-- Broken URL falls back to initials automatically -->

API Reference

Prop	Type	Default	Description
name	string | null	null	Name used to generate initials and as tooltip/alt text
src	string | null	null	Image URL — takes priority over initials when provided
size	"sm" | "md" | "lg" | "xl"	"md"	Size preset
shape	"circle" | "square"	"circle"	Shape of the avatar
color	string | "auto"	"auto"	Auto-color from name hash, or a custom CSS color string
label	boolean	false	Optional footer label (shows the full name below the avatar)

Deprecated Components

PxInitialsAvatar is kept for backward compatibility but internally delegates to PxAvatar. Migrate when convenient:

- import { PxInitialsAvatar } from 'praxis-vue-ui'
+ import { PxAvatar } from 'praxis-vue-ui'

- <PxInitialsAvatar name="Alice Johnson" size="xlarge" />
+ <PxAvatar name="Alice Johnson" size="xl" />