Avatar

Usage

Import the component and render it.

import { Avatar } from 'src/components/Avatar/Avatar';

<Avatar
  type="image"
  size="xs"
  shape="circle"
  name="Ana Villa"
  src="/docs/avatar-photo.jpg"
/>

Accessibility

Role: img (an <img> with alt for Image; role="img" with aria-label for Initials and Icon).

• Not focusable: an avatar only identifies someone. Wrap it in a link or button when it is interactive.
• name is the accessible name in every type, so the initials or icon are not read letter by letter. Initials come from name unless initials is set.
• Pass name="" when the person is already named next to the avatar: it is then hidden from assistive technology.

Size

Set the size prop: XSmall is "xs", Small is "sm", Medium is "md", Large is "lg".

<Avatar size="xs" />
<Avatar size="sm" />
<Avatar size="md" />
<Avatar size="lg" />

Type

Set the type prop: Image is "image", Initials is "initials", Icon is "icon".

AV

<Avatar type="image" />
<Avatar type="initials" />
<Avatar type="icon" />

Shape

Set the shape prop: Circle is "circle", Square is "square".

<Avatar shape="circle" />
<Avatar shape="square" />

Stroke

Set the stroke prop: False is {false}, True is {true}.

<Avatar />
<Avatar stroke />

Used in

Avatar is part of Card, ListItem and Sidebar.