Avatar

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

installyarn add @adobe/react-spectrum
added3.26.0
usageimport {Avatar} from '@adobe/react-spectrum'

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"
/>
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#


NameTypeDefaultDescription
srcstringThe image URL for the avatar.
isDisabledbooleanWhether 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{}numberavatar-size-100Size of the avatar. Affects both height and width.
altstringnullText description of the avatar.
Layout
NameTypeDescription
flex<stringnumberboolean>When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrow<number>When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrink<number>When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasis<numberstring>When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelf<'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<'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<number>The layout order for the element within a flex or grid container. See MDN.
gridArea<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<string>When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRow<string>When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStart<string>When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEnd<string>When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStart<string>When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEnd<string>When used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDescription
margin<>The margin for all four sides of the element. See MDN.
marginTop<>The margin for the top side of the element. See MDN.
marginBottom<>The margin for the bottom side of the element. See MDN.
marginStart<>The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEnd<>The margin for the logical end side of an element, depending on layout direction. See MDN.
marginX<>The margin for both the left and right sides of the element. See MDN.
marginY<>The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDescription
minWidth<>The minimum width of the element. See MDN.
maxWidth<>The maximum width of the element. See MDN.
minHeight<>The minimum height of the element. See MDN.
maxHeight<>The maximum height of the element. See MDN.
Positioning
NameTypeDescription
position<'static''relative''absolute''fixed''sticky'>Specifies how the element is positioned. See MDN.
top<>The top position for the element. See MDN.
bottom<>The bottom position for the element. See MDN.
left<>The left position for the element. See MDN. Consider using start instead for RTL support.
right<>The right position for the element. See MDN. Consider using start instead for RTL support.
start<>The logical start position for the element, depending on layout direction. See MDN.
end<>The logical end position for the element, depending on layout direction. See MDN.
zIndex<number>The stacking order for the element. See MDN.
isHidden<boolean>Hides the element.
Accessibility
NameTypeDescription
idstringThe element's unique identifier. See MDN.
Advanced
NameTypeDescription
UNSAFE_classNamestringSets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSPropertiesSets 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
/>
default Adobe avatar

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>
default Adobe avatardefault Adobe avatardefault Adobe avatardefault Adobe avatardefault Adobe avatardefault Adobe avatardefault Adobe avatardefault Adobe avatardefault Adobe avataravatar with custom size