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

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
flexResponsive<stringnumberboolean>When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrowResponsive<number>When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrinkResponsive<number>When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasisResponsive<numberstring>When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelfResponsive<'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.
justifySelfResponsive<'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.
orderResponsive<number>The layout order for the element within a flex or grid container. See MDN.
gridAreaResponsive<string>When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumnResponsive<string>When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRowResponsive<string>When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStartResponsive<string>When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEndResponsive<string>When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStartResponsive<string>When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEndResponsive<string>When used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDescription
marginResponsive<DimensionValue>The margin for all four sides of the element. See MDN.
marginTopResponsive<DimensionValue>The margin for the top side of the element. See MDN.
marginBottomResponsive<DimensionValue>The margin for the bottom side of the element. See MDN.
marginStartResponsive<DimensionValue>The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEndResponsive<DimensionValue>The margin for the logical end side of an element, depending on layout direction. See MDN.
marginXResponsive<DimensionValue>The margin for both the left and right sides of the element. See MDN.
marginYResponsive<DimensionValue>The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDescription
minWidthResponsive<DimensionValue>The minimum width of the element. See MDN.
maxWidthResponsive<DimensionValue>The maximum width of the element. See MDN.
minHeightResponsive<DimensionValue>The minimum height of the element. See MDN.
maxHeightResponsive<DimensionValue>The maximum height of the element. See MDN.
Positioning
NameTypeDescription
positionResponsive<'static''relative''absolute''fixed''sticky'>Specifies how the element is positioned. See MDN.
topResponsive<DimensionValue>The top position for the element. See MDN.
bottomResponsive<DimensionValue>The bottom position for the element. See MDN.
leftResponsive<DimensionValue>The left position for the element. See MDN. Consider using start instead for RTL support.
rightResponsive<DimensionValue>The right position for the element. See MDN. Consider using start instead for RTL support.
startResponsive<DimensionValue>The logical start position for the element, depending on layout direction. See MDN.
endResponsive<DimensionValue>The logical end position for the element, depending on layout direction. See MDN.
zIndexResponsive<number>The stacking order for the element. See MDN.
isHiddenResponsive<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
/>

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>