Avatar

An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.

Examples

Basic

Size variations

Small

Medium

Large

Extra Large

Bordered - light

Bordered - dark

Props

Avatar

*required
Name	Type	Default	Description
altrequired	string		Attribute that specifies the alternate text of the image for the Avatar.
border	'light' \| 'dark'		Border to add
className	string	''	Additional classes added to the Avatar.
size	'sm' \| 'md' \| 'lg' \| 'xl'		Size variant of avatar.
src	string	''	Attribute that specifies the URL of the image for the Avatar.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-avatar	--pf-v5-c-avatar--BorderColor	transparent
	.pf-v5-c-avatar	--pf-v5-c-avatar--BorderWidth	0
	.pf-v5-c-avatar	--pf-v5-c-avatar--BorderRadius	30em
--pf-v5-c-avatar--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em
	.pf-v5-c-avatar	--pf-v5-c-avatar--Width	2.25rem
	.pf-v5-c-avatar	--pf-v5-c-avatar--Height	2.25rem
	.pf-v5-c-avatar	--pf-v5-c-avatar--m-sm--Width	1.5rem
	.pf-v5-c-avatar	--pf-v5-c-avatar--m-sm--Height	1.5rem
	.pf-v5-c-avatar	--pf-v5-c-avatar--m-md--Width	2.25rem
	.pf-v5-c-avatar	--pf-v5-c-avatar--m-md--Height	2.25rem
	.pf-v5-c-avatar	--pf-v5-c-avatar--m-lg--Width	4.5rem
	.pf-v5-c-avatar	--pf-v5-c-avatar--m-lg--Height	4.5rem
	.pf-v5-c-avatar	--pf-v5-c-avatar--m-xl--Width	8rem
	.pf-v5-c-avatar	--pf-v5-c-avatar--m-xl--Height	8rem
	.pf-v5-c-avatar	--pf-v5-c-avatar--m-light--BorderColor	#d2d2d2
--pf-v5-c-avatar--m-light--BorderColor --pf-v5-global--BorderColor--dark-100 $pf-v5-global--BorderColor--dark-100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-avatar	--pf-v5-c-avatar--m-light--BorderWidth	1px
--pf-v5-c-avatar--m-light--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-avatar	--pf-v5-c-avatar--m-dark--BorderColor	#4f5255
--pf-v5-c-avatar--m-dark--BorderColor --pf-v5-global--palette--black-700 $pf-v5-color-black-700 #4f5255
	.pf-v5-c-avatar	--pf-v5-c-avatar--m-dark--BorderWidth	1px
--pf-v5-c-avatar--m-dark--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-avatar.pf-m-light	--pf-v5-c-avatar--BorderColor	#d2d2d2
--pf-v5-c-avatar--BorderColor --pf-v5-c-avatar--m-light--BorderColor --pf-v5-global--BorderColor--dark-100 $pf-v5-global--BorderColor--dark-100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-avatar.pf-m-light	--pf-v5-c-avatar--BorderWidth	1px
--pf-v5-c-avatar--BorderWidth --pf-v5-c-avatar--m-light--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-avatar.pf-m-dark	--pf-v5-c-avatar--BorderColor	#4f5255
--pf-v5-c-avatar--BorderColor --pf-v5-c-avatar--m-dark--BorderColor --pf-v5-global--palette--black-700 $pf-v5-color-black-700 #4f5255
	.pf-v5-c-avatar.pf-m-dark	--pf-v5-c-avatar--BorderWidth	1px
--pf-v5-c-avatar--BorderWidth --pf-v5-c-avatar--m-dark--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-avatar.pf-m-sm	--pf-v5-c-avatar--Width	1.5rem
--pf-v5-c-avatar--Width --pf-v5-c-avatar--m-sm--Width 1.5rem
	.pf-v5-c-avatar.pf-m-sm	--pf-v5-c-avatar--Height	1.5rem
--pf-v5-c-avatar--Height --pf-v5-c-avatar--m-sm--Height 1.5rem
	.pf-v5-c-avatar.pf-m-md	--pf-v5-c-avatar--Width	2.25rem
--pf-v5-c-avatar--Width --pf-v5-c-avatar--m-md--Width 2.25rem
	.pf-v5-c-avatar.pf-m-md	--pf-v5-c-avatar--Height	2.25rem
--pf-v5-c-avatar--Height --pf-v5-c-avatar--m-md--Height 2.25rem
	.pf-v5-c-avatar.pf-m-lg	--pf-v5-c-avatar--Width	4.5rem
--pf-v5-c-avatar--Width --pf-v5-c-avatar--m-lg--Width 4.5rem
	.pf-v5-c-avatar.pf-m-lg	--pf-v5-c-avatar--Height	4.5rem
--pf-v5-c-avatar--Height --pf-v5-c-avatar--m-lg--Height 4.5rem
	.pf-v5-c-avatar.pf-m-xl	--pf-v5-c-avatar--Width	8rem
--pf-v5-c-avatar--Width --pf-v5-c-avatar--m-xl--Width 8rem
	.pf-v5-c-avatar.pf-m-xl	--pf-v5-c-avatar--Height	8rem
--pf-v5-c-avatar--Height --pf-v5-c-avatar--m-xl--Height 8rem

View source on GitHub