Avatar

An avatar is a visual representation of a user, which can contain an image or placeholder graphic.

Examples

Basic

Bordered

Size variations

Small

Medium

Large

Extra Large

Props

Avatar

*required
Name	Type	Default	Description
altrequired	string		Attribute that specifies the alternate text of the image for the avatar.
className	string		Additional classes added to the avatar.
isBordered	boolean		Flag to indicate the avatar should have a border.
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-v6-c-avatar	--pf-v6-c-avatar--BorderColor	transparent
	.pf-v6-c-avatar	--pf-v6-c-avatar--BorderWidth	0
	.pf-v6-c-avatar	--pf-v6-c-avatar--BorderRadius	999px
--pf-v6-c-avatar--BorderRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-avatar	--pf-v6-c-avatar--Width	2.25rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--Height	2.25rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-sm--Width	1.5rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-sm--Height	1.5rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-md--Width	2.25rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-md--Height	2.25rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-lg--Width	4.5rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-lg--Height	4.5rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-xl--Width	8rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-xl--Height	8rem
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-bordered--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-avatar--m-bordered--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-avatar	--pf-v6-c-avatar--m-bordered--BorderWidth	1px
--pf-v6-c-avatar--m-bordered--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-avatar.pf-m-bordered	--pf-v6-c-avatar--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-avatar--BorderColor --pf-v6-c-avatar--m-bordered--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-avatar.pf-m-bordered	--pf-v6-c-avatar--BorderWidth	1px
--pf-v6-c-avatar--BorderWidth --pf-v6-c-avatar--m-bordered--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-avatar.pf-m-sm	--pf-v6-c-avatar--Width	1.5rem
--pf-v6-c-avatar--Width --pf-v6-c-avatar--m-sm--Width 1.5rem
	.pf-v6-c-avatar.pf-m-sm	--pf-v6-c-avatar--Height	1.5rem
--pf-v6-c-avatar--Height --pf-v6-c-avatar--m-sm--Height 1.5rem
	.pf-v6-c-avatar.pf-m-md	--pf-v6-c-avatar--Width	2.25rem
--pf-v6-c-avatar--Width --pf-v6-c-avatar--m-md--Width 2.25rem
	.pf-v6-c-avatar.pf-m-md	--pf-v6-c-avatar--Height	2.25rem
--pf-v6-c-avatar--Height --pf-v6-c-avatar--m-md--Height 2.25rem
	.pf-v6-c-avatar.pf-m-lg	--pf-v6-c-avatar--Width	4.5rem
--pf-v6-c-avatar--Width --pf-v6-c-avatar--m-lg--Width 4.5rem
	.pf-v6-c-avatar.pf-m-lg	--pf-v6-c-avatar--Height	4.5rem
--pf-v6-c-avatar--Height --pf-v6-c-avatar--m-lg--Height 4.5rem
	.pf-v6-c-avatar.pf-m-xl	--pf-v6-c-avatar--Width	8rem
--pf-v6-c-avatar--Width --pf-v6-c-avatar--m-xl--Width 8rem
	.pf-v6-c-avatar.pf-m-xl	--pf-v6-c-avatar--Height	8rem
--pf-v6-c-avatar--Height --pf-v6-c-avatar--m-xl--Height 8rem

View source on GitHub