React

Avatar

The avatar is used to represent a user. It may contain an image that represents the user or a placeholder graphic in the absence of an image. Typical usage is to represent the current user in the masthead. Related design guidelines: Masthead

ExamplesPropsCSS Variables

Examples

Simple avatar

avatar
Copied to clipboard

Props

Avatar Props

The Avatar component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring
srcstring
altstring

CSS Variables

--pf-c-avatar--BorderRadiusc_avatar_BorderRadius30em
--pf-c-avatar--Heightc_avatar_Height2.25rem
--pf-c-avatar--Widthc_avatar_Width2.25rem