Avatar

Use Avatar to display a thumbnail representation of a person.
  • Experimental
  • Not reviewed for accessibility
import {Avatar, Stack} from '@primer/react-brand'

Examples

Default

Sizes

The size of the avatar can be controlled by the size prop.

Responsive Sizes

Passing an Object of a particular shape will allow granular control of size at various supported breakpoints.

Supported breakpoints are narrow, regular and wide.

The Object value does not require all properties be passed, but rather operates on the basis of min-width.

E.g. Providing only narrow will apply that value to all larger breakpoints, but not the other way.

Shapes

The shape of the avatar can be controlled by the shape prop.

Component props

Avatar Required

nametypedefaultrequireddescription
altstringtrueThe alt text of the image
classNamestringfalseAvatar custom class
size32
40
48
64
80
'ResponsiveSizeMap'
40falseThe size (in pixels) of the image
shape'circle'
'square'
circlefalseThe shape of the image
srcstringtrueA url to the person's image