Avatar

React Design Guidelines

Usage

Props

Name	Type	Required	Default	Description
children	ReactNode	false
className	string	false		Additional classNames
clickable	boolean	false	false	Sets the Avatar's clickable UI state. For accessibility, see `role` ally This prop is around UI and has 0 UX or JS for interaction, try `role` instead. defaultvalue false deprecated Reviewing for removal from system, prefer accessible `role` for interactive UI. deprecatedsince TBD since 10.19.0
disabled	boolean	false	false	Sets the Avatar's disabled state defaultvalue false
size	AvatarSize	false	md	Sets the Avatar's size defaultvalue md deprecated Size "xl" has been deprecated and will be removed in a future version. Please use "lg" instead of "xl". Before `<Avatar size="xl" />` After `<Avatar size="lg" />` deprecatedsince 10.20.0 since 10.19.0
style	CSSProperties	false		Additional CSS styles

Avatar can act as a read only display piece, or act as a button or link. Use the role prop to opt-in to accessible interactions.

role=button

role=link

clickable

A UI hover variant with no semantics.

disabled

size

Avatar.Icon

Name	Type	Required	Default	Description
children	ReactNode	false
className	string	false		Additional classNames
icon	ReactNode	true		The icon to display since 10.19.0
style	CSSProperties	false		Additional CSS styles

Avatar.Label

Name	Type	Required	Default	Description
children	ReactNode	false
className	string	false		Additional classNames
style	CSSProperties	false		Additional CSS styles

Avatar.Portrait

Name	Type	Required	Default	Description
children	ReactNode	false
className	string	false		Additional classNames
imageUrl	string	true		The Avatar rich media url since 10.19.0
style	CSSProperties	false		Additional CSS styles