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

Copied to clipboard

Props

Avatar props

The Avatar component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the Avatar.
srcstring''Attribute that specifies the URL of the image for the Avatar.
altstringAttribute that specifies the alternate text of the image for the Avatar.

CSS variables

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