Default

Out of the box, you get a simple user icon that can be used to indicate a user:

Editable example
<Avatar />
<Avatar />

Avatar types

We support two variants:

• AvatarType.Team
• AvatarType.Account

Editable example
<Avatar type={AvatarType.Team} />
<Avatar type={AvatarType.Account} />
<Avatar type={AvatarType.Team} />
<Avatar type={AvatarType.Account} />

With initials

This component supports adding a first name and (optionally) a last name as the variant, which adds the initials to the avatar.

Editable example
<Avatar firstName={"Inigo"} />
<Avatar firstName={"Inigo"} lastName={"Montoya"} />
<Avatar firstName={"Inigo"} />
<Avatar firstName={"Inigo"} lastName={"Montoya"} />

Invite state

If you want to indicate that a user is eligible to be invited (hasn't been invited or signed up before), there is a variant for that also:

Editable example
<Avatar firstName={"Joe"} isInvite />
<Avatar firstName={"Joe"} isInvite />

Accessibility

N/A