AvatarLockup

Display a user avatar with additional details such as name, pronouns, and information.

Props

Prop	Type	Default	Description
alt	string		The name of the user
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	xs	Size of the avatar: xs = 24px, sm = 32px, md = 40px, lg = 72px, xl = 120px
src	url		URL of the user image
name	string		Name of the user
pronouns	string		Pronouns of the user (e.g., "he/him", "she/her", "they/them")
information	string		Additional information about the user like business unit or title
align	"left" \| "right"	left	Alignment of the avatar lockup
emphasized	boolean	true	Whether to emphasize the avatar lockup ie; the lockup needs to stand out from the other content
lineOfText	boolean	false	Whether to use within sentence of text
aria-label	string		An accessible label for the avatar lockup.
data-testid	string		A data-testid for the avatar lockup.
aria-labelledby	string		Identifies the element (or elements) that labels the element it is applied to.
aria-describedby	string		Identifies the element (or elements) that describes the element on which the attribute is set.
style	{}		CSS properties applied to the avatar lockup component.
key	string \| number		The key of the element.

Emphasized

<AvatarLockup size="md" src="https://via.placeholder.com/72"  name="First Last" pronouns="he/him" information="Software Engineer" />
<br />
<AvatarLockup size="md" src="https://via.placeholder.com/72" align="right" name="First Last" pronouns="he/him" information="Software Engineer" />
<br />
<AvatarLockup size="md" src="https://via.placeholder.com/72" name="First Last"/>
<br />
<AvatarLockup size="md" src="https://via.placeholder.com/72" name="First Last" pronouns="he/him"/>
<br />
<AvatarLockup size="md" src="https://via.placeholder.com/72"  name="First Last" information="Software Engineer" />
<br />
<AvatarLockup name="First Last" pronouns="he/him"/>
<br />
<AvatarLockup name="First Last" />
<br />
<AvatarLockup name="First Last" pronouns="he/him" lineOfText={true}/> used within sentence of text.
<br />
<br />
<AvatarLockup name="First Last" lineOfText={true}/> used within sentence of text.
<br />

De-emphasized

<AvatarLockup size="md" src="https://via.placeholder.com/72"  name="First Last" pronouns="he/him" information="Software Engineer"  emphasized={false} />
<br />
<AvatarLockup size="md" src="https://via.placeholder.com/72"  name="First Last" align="right" pronouns="he/him" information="Software Engineer"  emphasized={false} />
<br />
<AvatarLockup size="md" src="https://via.placeholder.com/72" name="First Last" emphasized={false}/>
<br />
<AvatarLockup size="md" src="https://via.placeholder.com/72" name="First Last" pronouns="he/him" emphasized={false}/>
<br />
<AvatarLockup size="md" src="https://via.placeholder.com/72"  name="First Last" information="Software Engineer" emphasized={false}/><br/>
<br/>
<AvatarLockup  name="First Last" pronouns="he/him" emphasized={false}/>
<br />
<AvatarLockup   name="First Last" emphasized={false} />
<br />
<AvatarLockup  name="First Last" pronouns="he/him" emphasized={false} lineOfText={true}/> used within sentence of text.
<br />
<br />
<AvatarLockup   name="First Last" emphasized={false} lineOfText={true}/> used within sentence of text.
<br />