Avatar

You can use an Avatar to represent a user. Every Avatar image has a subtle color wash.

Props

Component props
Name	Type	Default
`name` Required	`string`	-
`accessibilityLabel`	`string`	-
	String that clients such as VoiceOver will read to describe the element. Will default to `name` prop if not provided.
`outline`	`boolean`	`false`
	Adds a white border around Avatar so it's visible when displayed on other images
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "fit"`	`"fit"`
	xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px. If size is `fit`, Avatar will fill 100% of the parent container width
`src`	`string`	-
`verified`	`boolean`	`false`

Usage guidelines

When to Use

To reflect a person, company or brand within the product.

When Not to Use

Representing a group of people, companies and/or brands. Use AvatarGroup instead.

Fixed Sizes

There are 5 sizes you can choose for an Avatar. For certain designs you may need a container-based size. More information on that option is below.

<Box display="flex" direction="row" marginStart={-2} marginEnd={-2} wrap>
  <Box paddingX={2}>
    <Avatar
      size="xs"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
  <Box paddingX={2}>
    <Avatar
      size="sm"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
  <Box paddingX={2}>
    <Avatar
      size="md"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
  <Box paddingX={2}>
    <Avatar
      size="lg"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
  <Box paddingX={2}>
    <Avatar
      size="xl"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
</Box>

<Box display="flex" direction="row" marginStart={-2} marginEnd={-2} wrap>
  <Box paddingX={2}>
    <Avatar
      size="xs"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
  <Box paddingX={2}>
    <Avatar
      size="sm"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
  <Box paddingX={2}>
    <Avatar
      size="md"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
  <Box paddingX={2}>
    <Avatar
      size="lg"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
  <Box paddingX={2}>
    <Avatar
      size="xl"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
</Box>

Container Based Sizes

Avatars that are not given a size prop will be expand to fit to the width of their
parent container. A common use case is to achieve column-based sizing.

Resize the browser to see these Avatar change to match the width of the Column they
have been placed in.

<Box display="flex" direction="row">
  <Box width={40}>
    <Avatar name="Julia" />
  </Box>
  <Box column={2}>
    <Avatar name="Julia" />
  </Box>
  <Box column={4}>
    <Avatar name="Keerthi" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
  </Box>
</Box>

<Box display="flex" direction="row">
  <Box width={40}>
    <Avatar name="Julia" />
  </Box>
  <Box column={2}>
    <Avatar name="Julia" />
  </Box>
  <Box column={4}>
    <Avatar name="Keerthi" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
  </Box>
</Box>

Without an image

If there is no image source provided to the Avatar, the first character of
the name provided will be used as a placeholder.

<Avatar
  name="Keerthi"
  size="lg"
/>

<Avatar
  name="Keerthi"
  size="lg"
/>

Verified

When someone has a verified account, we can set the verified prop on it.

<Avatar
  name="Shanice"
  size="lg"
  src="https://i.ibb.co/7tGKGvb/shanice.jpg"
  verified
/>

<Avatar
  name="Shanice"
  size="lg"
  src="https://i.ibb.co/7tGKGvb/shanice.jpg"
  verified
/>

Edit page on GitHub