Lightning Component – Avatar Group
Salesforce Lightning avatar group is an element that communicates to the user that there is more than 1 person associated to an item. The Avatar Group contains two Avatar components with modifying classes. Both Avatars in the group get slds-avatar-grouped applied to them. Then, slds-avatar-grouped__primary is applied to the first Avatar and slds-avatar-grouped__secondary on the second. Avatars of the image variety are preferred within an Avatar Group.
Lightning Avatar Group – Base
Avatar Group – CSS Classes
The following table lists out the CSS classes for Lightning Avatar Group component, their usage, and the CSS selectors that these Avatar GroupCSS classes can be used on.
| CSS Class Name | Description |
|---|---|
| slds-avatar-group | Creates an Avatar Group. This CSS class can be used for the elements with CSS selector div, span only. |
| slds-avatar__initials | Used for initials inside an avatar. This CSS class can be used for the elements with CSS selector .slds-avatar abbr only. |
| slds-avatar__initials | Used for initials inside an avatar. This CSS class can be used for the elements with CSS selector .slds-avatar abbr only. |
| slds-avatar-grouped | Variant of an Avatar in an Avatar Group. This CSS class can be used for the elements with CSS selector .slds-avatar-group span only. |
| slds-avatar-grouped_inverse | Variant of an Avatar with inverse background in an Avatar Group. This CSS class can be used for the elements with CSS selector .slds-avatar-grouped only. |
| slds-avatar-grouped__primary | Modifier for the primary Avatar in an Avatar Group. This CSS class can be used for the elements with CSS selector .slds-avatar-grouped only. |
| slds-avatar-grouped__initials | Modifier for the Avatar that contains User Initials in an Avatar Group. This CSS class can be used for the elements with CSS selector .slds-avatar-grouped only. |
| slds-avatar-grouped__secondary | Modifier for the secondary Avatar in an Avatar Group. This CSS class can be used for the elements with CSS selector .slds-avatar-grouped only. |
| slds-avatar-group_x-small | Creates an extra small Avatar Group. This CSS class can be used for the elements with CSS selector .slds-avatar-group only. |
| slds-avatar-group_small | Creates a small Avatar Group. This CSS class can be used for the elements with CSS selector .slds-avatar-group only. |
| slds-avatar-group_medium | Creates a medium Avatar Group. This CSS class can be used for the elements with CSS selector .slds-avatar-group only. |
| slds-avatar-group_large | Creates a large Avatar Group. This CSS class can be used for the elements with CSS selector .slds-avatar-group only. |
Lightning Avatar Group With User Initials
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<span class="slds-avatar-group">
<span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__primary">
<lightning:avatar src="/docs/component-library/app/images/examples/avatar1.jpg" initials="TK" fallbackIconName="standard:person_account" alternativeText="Tutorialkart"/>
</span>
<span class="slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary">
<lightning:avatar src="/docs/component-library/app/images/examples/avatar1.jpg" initials="TK" fallbackIconName="standard:person_account" alternativeText="Tutorialkart"/>
</span>
</span>
</aura:component><aura:application extends="force:slds">
<c:avatargroup/>
</aura:application>To use an image in your org as an avatar, upload the image as a static resource in the Static Resources setup page. Use the {!$Resource.logo} syntax in your src attribute, where logo is the name you provided in the Name field on the setup page. Use the alternativeText attribute to describe the avatar, such as a user’s initials or name. This description provides the value for the alt attribute in the img HTML tag.
Output
Avatar Group – Sizes
Avatar Groups come in 4 different sizes: x-small, small, medium, and large by applying a slds-avatar-group_{size} modifier class on slds-avatar-group. If the size modifier class is not used, medium is also the default size.