Avatar

The Avatar component represents a user or entity with images, initials, or icons. It supports multiple sizes and includes an optional status badge indicator.

Import

React

// with @dhl-official/react-library:
import { DhlAvatar } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlAvatar } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-avatar></dhl-avatar>

Vue.js

// with @dhl-official/vue-library:
import { DhlAvatar } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlAvatar } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlAvatar name="John Doe" />

Angular

<dhl-avatar name="John Doe"></dhl-avatar>

Vue.js

<dhl-avatar name="John Doe"></dhl-avatar>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
alt	alt	An optional prop for image alt text. If not provided, falls back to the name prop.	string	undefined
dataAriaLabel	data-aria-label	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from name or alt.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	`dhl-avatar-${getRandomString()}`
dataRole	data-role	An optional prop defining the role attribute of the component.	string	"img"
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
icon	icon	An optional prop for custom icon source. Used when type is "icon".	string	undefined
name (required)	name	A REQUIRED prop for the user's name. Used to generate initials and as fallback alt text.	string	undefined
showBadge	show-badge	An optional boolean prop to show or hide the badge indicator.	boolean	false
size	size	An optional size prop for the component.	"lg" | "md" | "sm" | "xl"	DHL_AVATAR.SIZE.MD
src	src	An optional prop for the image source URL. When provided and valid, displays an image avatar.	string	undefined
status	status	An optional prop for badge status.	Variants.error | Variants.info | Variants.neutral | Variants.success | Variants.warning	DHL_AVATAR.STATUS.SUCCESS
type	type	An optional type prop to specify the avatar type (image, initials, or icon).	"icon" | "image" | "initials"	DHL_AVATAR.TYPE.IMAGE

Slots

Slot	Description
"unnamed"	Content to display in the avatar (for custom content)

Dependencies

Depends on

• dhl-icon-wrapper
• dhl-icon

Graph

---

Built by DHL User Interface Library Team!