Spectrum 2 is now available! Check out the S2 Avatar docs and the migration docs.

Avatar

An avatar is a thumbnail representation of an entity, such as a user or an organization.

install	`yarn add @adobe/react-spectrum`
added	3.26.0
usage	`import {Avatar} from '@adobe/react-spectrum'`

View guidelines

Example#

<Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" />

<Avatar
  src="https://i.imgur.com/kJOwAdv.png"
  alt="default Adobe avatar"
/>

<Avatar
  src="https://i.imgur.com/kJOwAdv.png"
  alt="default Adobe avatar"
/>

Content#

The Avatar component is a thumbnail representation of an entity, such as a user or an organization. They accept a src attribute defining the image URL, and an alt attribute for an accessible description.

Accessibility#

By default, avatars are decorative and have an empty alt attribute. Standalone avatars with no surrounding context must have a custom alt prop defined for accessibility.

Internationalization#

To internationalize an Avatar, a localized string should be passed to the alt prop.

Props#

Name	Type	Default	Description
`src`	`string`	—	The image URL for the avatar.
`isDisabled`	`boolean`	—	Whether the avatar is disabled.
`size`	`'avatar-size-50' \| 'avatar-size-75' \| 'avatar-size-100' \| 'avatar-size-200' \| 'avatar-size-300' \| 'avatar-size-400' \| 'avatar-size-500' \| 'avatar-size-600' \| 'avatar-size-700' \| string & & {} \| number`	`avatar-size-100`	Size of the avatar. Affects both height and width.
`alt`	`string`	`null`	Text description of the avatar.

Layout

Name	Type	Description
`flex`	`Responsive<string \| number \| boolean>`	When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
`flexGrow`	`Responsive<number>`	When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
`flexShrink`	`Responsive<number>`	When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
`flexBasis`	`Responsive<number \| string>`	When used in a flex layout, specifies the initial main size of the element. See MDN.
`alignSelf`	`Responsive<'auto' \| 'normal' \| 'start' \| 'end' \| 'center' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'stretch'>`	Overrides the `alignItems` property of a flex or grid container. See MDN.
`justifySelf`	`Responsive<'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'left' \| 'right' \| 'stretch'>`	Specifies how the element is justified inside a flex or grid container. See MDN.
`order`	`Responsive<number>`	The layout order for the element within a flex or grid container. See MDN.
`gridArea`	`Responsive<string>`	When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
`gridColumn`	`Responsive<string>`	When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
`gridRow`	`Responsive<string>`	When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
`gridColumnStart`	`Responsive<string>`	When used in a grid layout, specifies the starting column to span within the grid. See MDN.
`gridColumnEnd`	`Responsive<string>`	When used in a grid layout, specifies the ending column to span within the grid. See MDN.
`gridRowStart`	`Responsive<string>`	When used in a grid layout, specifies the starting row to span within the grid. See MDN.
`gridRowEnd`	`Responsive<string>`	When used in a grid layout, specifies the ending row to span within the grid. See MDN.

Spacing

Name	Type	Description
`margin`	`Responsive<DimensionValue>`	The margin for all four sides of the element. See MDN.
`marginTop`	`Responsive<DimensionValue>`	The margin for the top side of the element. See MDN.
`marginBottom`	`Responsive<DimensionValue>`	The margin for the bottom side of the element. See MDN.
`marginStart`	`Responsive<DimensionValue>`	The margin for the logical start side of the element, depending on layout direction. See MDN.
`marginEnd`	`Responsive<DimensionValue>`	The margin for the logical end side of an element, depending on layout direction. See MDN.
`marginX`	`Responsive<DimensionValue>`	The margin for both the left and right sides of the element. See MDN.
`marginY`	`Responsive<DimensionValue>`	The margin for both the top and bottom sides of the element. See MDN.

Sizing

Name	Type	Description
`minWidth`	`Responsive<DimensionValue>`	The minimum width of the element. See MDN.
`maxWidth`	`Responsive<DimensionValue>`	The maximum width of the element. See MDN.
`minHeight`	`Responsive<DimensionValue>`	The minimum height of the element. See MDN.
`maxHeight`	`Responsive<DimensionValue>`	The maximum height of the element. See MDN.

Positioning

Name	Type	Description
`position`	`Responsive<'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'>`	Specifies how the element is positioned. See MDN.
`top`	`Responsive<DimensionValue>`	The top position for the element. See MDN.
`bottom`	`Responsive<DimensionValue>`	The bottom position for the element. See MDN.
`left`	`Responsive<DimensionValue>`	The left position for the element. See MDN. Consider using `start` instead for RTL support.
`right`	`Responsive<DimensionValue>`	The right position for the element. See MDN. Consider using `start` instead for RTL support.
`start`	`Responsive<DimensionValue>`	The logical start position for the element, depending on layout direction. See MDN.
`end`	`Responsive<DimensionValue>`	The logical end position for the element, depending on layout direction. See MDN.
`zIndex`	`Responsive<number>`	The stacking order for the element. See MDN.
`isHidden`	`Responsive<boolean>`	Hides the element.

Accessibility

Name	Type	Description
`id`	`string`	The element's unique identifier. See MDN.

Advanced

Name	Type	Description
`UNSAFE_className`	`string`	Sets the CSS className for the element. Only use as a last resort. Use style props instead.
`UNSAFE_style`	`CSSProperties`	Sets inline style for the element. Only use as a last resort. Use style props instead.

Visual options#

Disabled#

View guidelines

<Avatar
  src="https://i.imgur.com/kJOwAdv.png"
  alt="default Adobe avatar"
  isDisabled
/>

<Avatar
  src="https://i.imgur.com/kJOwAdv.png"
  alt="default Adobe avatar"
  isDisabled
/>

<Avatar
  src="https://i.imgur.com/kJOwAdv.png"
  alt="default Adobe avatar"
  isDisabled
/>

Size#

View guidelines

Sizes can either be one of the predefined avatar size variables, or a custom size in pixels.

<Flex gap="size-100" wrap>
  {[50, 75, 100, 200, 300, 400, 500, 600, 700].map((size) => (
    <Avatar
      key={size}
      src="https://i.imgur.com/kJOwAdv.png"
      alt="default Adobe avatar"
      size={`avatar-size-${size}`}
    />
  ))}
  <Avatar
    src="https://i.imgur.com/kJOwAdv.png"
    alt="avatar with custom size"
    size={50}
  />
</Flex>

<Flex gap="size-100" wrap>
  {[50, 75, 100, 200, 300, 400, 500, 600, 700].map(
    (size) => (
      <Avatar
        key={size}
        src="https://i.imgur.com/kJOwAdv.png"
        alt="default Adobe avatar"
        size={`avatar-size-${size}`}
      />
    )
  )}
  <Avatar
    src="https://i.imgur.com/kJOwAdv.png"
    alt="avatar with custom size"
    size={50}
  />
</Flex>

<Flex
  gap="size-100"
  wrap
>
  {[
    50,
    75,
    100,
    200,
    300,
    400,
    500,
    600,
    700
  ].map((size) => (
    <Avatar
      key={size}
      src="https://i.imgur.com/kJOwAdv.png"
      alt="default Adobe avatar"
      size={`avatar-size-${size}`}
    />
  ))}
  <Avatar
    src="https://i.imgur.com/kJOwAdv.png"
    alt="avatar with custom size"
    size={50}
  />
</Flex>