Default
Out of the box, you get a simple user icon that can be used to indicate a user:
Editable example<Avatar />
Avatar types
We support two variants:
- AvatarType.Team
- AvatarType.Account
Editable example<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"} />
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 />
Accessibility
N/A