Avatar

Use Avatar to display a thumbnail representation of a person.

Experimental
Not reviewed for accessibility

On this page

import {Avatar, Stack} from '@primer/react-brand'

Examples

Default

<Avatar
  src="https://avatars.githubusercontent.com/u/92997159?v=4"
  alt="Mona profile"
/>

<Avatar
  src="https://avatars.githubusercontent.com/u/92997159?v=4"
  alt="Mona profile"
/>

Sizes

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

<Stack
  direction="horizontal"
  alignItems="center"
  justifyContent="center"
  gap="spacious"
  style={{height: 200}}
>
  <Avatar
    size={32}
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="Mona avatar at 32px"
  />
  <Avatar
    size={40}
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="Mona avatar at 40px"
  />
  <Avatar
    size={48}
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="Mona avatar at 48px"
  />
  <Avatar
    size={64}
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="Mona avatar at 64px"
  />
  <Avatar
    size={80}
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="Mona avatar at 80px"
  />
</Stack>

<Stack
  direction="horizontal"
  alignItems="center"
  justifyContent="center"
  gap="spacious"
  style={{height: 200}}
>
  <Avatar
    size={32}
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="Mona avatar at 32px"
  />
  <Avatar
    size={40}
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="Mona avatar at 40px"
  />
  <Avatar
    size={48}
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="Mona avatar at 48px"
  />
  <Avatar
    size={64}
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="Mona avatar at 64px"
  />
  <Avatar
    size={80}
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="Mona avatar at 80px"
  />
</Stack>

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.

<Avatar
  size={{narrow: 32, regular: 40, wide: 80}}
  src="https://avatars.githubusercontent.com/u/92997159?v=4"
  alt="Mona avatar at 32px"
/>

<Avatar
  size={{narrow: 32, regular: 40, wide: 80}}
  src="https://avatars.githubusercontent.com/u/92997159?v=4"
  alt="Mona avatar at 32px"
/>

Shapes

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

<Stack
  direction="horizontal"
  alignItems="center"
  justifyContent="center"
  gap="spacious"
  style={{height: 200}}
>
  <Avatar
    size={64}
    shape="circle"
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="A circular avatar picture"
  />
  <Avatar
    size={64}
    shape="square"
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="A square avatar picture"
  />
</Stack>

<Stack
  direction="horizontal"
  alignItems="center"
  justifyContent="center"
  gap="spacious"
  style={{height: 200}}
>
  <Avatar
    size={64}
    shape="circle"
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="A circular avatar picture"
  />
  <Avatar
    size={64}
    shape="square"
    src="https://avatars.githubusercontent.com/u/92997159?v=4"
    alt="A square avatar picture"
  />
</Stack>

Component props

Avatar Required

name	type	default	required	description
`alt`	`string`		`true`	The alt text of the image
`className`	`string`		`false`	Avatar custom class
`size`	`32` `40` `48` `64` `80` `'ResponsiveSizeMap'`	`40`	`false`	The size (in pixels) of the image
`shape`	`'circle'` `'square'`	`circle`	`false`	The shape of the image
`src`	`string`		`true`	A url to the person's image

Edit this page on GitHub