Avatar
An image element or initials representing the user.
Theme
<sa-avatar src="/avatars/avatar-1.jpg"/>
<sa-avatar-group>
<sa-avatar src="/avatars/avatar-1.jpg"/>
<sa-avatar src="/avatars/avatar-2.jpg"/>
<sa-avatar src="/avatars/avatar-3.jpg"/>
</sa-avatar-group>Usage
Use <sa-avatar> to display a single avatar. Display a group of avatars using <sa-avatar-group>.
<!-- Display a single avatar -->
<sa-avatar src="..." />
<!-- Display a group of avatars -->
<sa-avatar-group>
<sa-avatar src="..." />
<sa-avatar src="..." />
</sa-avatar-group>Examples
Sizes
Set size to AvatarSize.Small or AvatarSize.Large. The sizes apply to image and initials avatars alike.
Theme
<div class="flex flex-wrap items-center gap-2">
<sa-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Small"/>
<sa-avatar src="/avatars/avatar-1.jpg"/>
<sa-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Large"/>
</div>
<div class="flex flex-wrap items-center gap-2">
<sa-avatar initials="IB" size="AvatarSize.Small"/>
<sa-avatar initials="IB"/>
<sa-avatar initials="IB" size="AvatarSize.Large"/>
</div>Name or initials
Display the initials of a user using the initials attribute. You can specify the name attribute instead, and the initials will be automatically determined.
Theme
<!-- specify initials explicitly -->
<sa-avatar initials="IB" />
<!-- or specify name -->
<sa-avatar name="Ibn Battuta" />Badge
Nest an <sa-avatar-badge> inside the avatar to show a status dot that scales with the avatar size.
Theme
<div class="flex flex-wrap items-center gap-2">
<sa-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Small">
<sa-avatar-badge/>
</sa-avatar>
<sa-avatar src="/avatars/avatar-2.jpg">
<sa-avatar-badge/>
</sa-avatar>
<sa-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Large">
<sa-avatar-badge/>
</sa-avatar>
</div>
<div class="flex flex-wrap items-center gap-2">
<sa-avatar initials="IB" size="AvatarSize.Small">
<sa-avatar-badge/>
</sa-avatar>
<sa-avatar initials="IB">
<sa-avatar-badge/>
</sa-avatar>
<sa-avatar initials="IB" size="AvatarSize.Large">
<sa-avatar-badge/>
</sa-avatar>
</div>Badge with icon
The badge can hold an icon instead of a plain dot.
Theme
<div class="flex flex-wrap items-center gap-2">
<sa-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Small">
<sa-avatar-badge>
<sa-icon name="plus"/>
</sa-avatar-badge>
</sa-avatar>
<sa-avatar src="/avatars/avatar-3.jpg">
<sa-avatar-badge>
<sa-icon name="plus"/>
</sa-avatar-badge>
</sa-avatar>
<sa-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Large">
<sa-avatar-badge>
<sa-icon name="plus"/>
</sa-avatar-badge>
</sa-avatar>
</div>
<div class="flex flex-wrap items-center gap-2">
<sa-avatar initials="IB" size="AvatarSize.Small">
<sa-avatar-badge>
<sa-icon name="plus"/>
</sa-avatar-badge>
</sa-avatar>
<sa-avatar initials="IB">
<sa-avatar-badge>
<sa-icon name="plus"/>
</sa-avatar-badge>
</sa-avatar>
<sa-avatar initials="IB" size="AvatarSize.Large">
<sa-avatar-badge>
<sa-icon name="plus"/>
</sa-avatar-badge>
</sa-avatar>
</div>Group
Add a group of avatars using <sa-avatar-group>.
Theme
<sa-avatar-group>
<sa-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Small"/>
<sa-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Small"/>
<sa-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Small"/>
</sa-avatar-group>
<sa-avatar-group>
<sa-avatar src="/avatars/avatar-1.jpg"/>
<sa-avatar src="/avatars/avatar-2.jpg"/>
<sa-avatar src="/avatars/avatar-3.jpg"/>
</sa-avatar-group>
<sa-avatar-group>
<sa-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Large"/>
<sa-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Large"/>
<sa-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Large"/>
</sa-avatar-group>Group with count
Add an <sa-avatar-group-count> as the last child of the group to show how many more people are not pictured.
Theme
<sa-avatar-group>
<sa-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Small"/>
<sa-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Small"/>
<sa-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Small"/>
<sa-avatar-group-count>+3</sa-avatar-group-count>
</sa-avatar-group>
<sa-avatar-group>
<sa-avatar src="/avatars/avatar-1.jpg"/>
<sa-avatar src="/avatars/avatar-2.jpg"/>
<sa-avatar src="/avatars/avatar-3.jpg"/>
<sa-avatar-group-count>+3</sa-avatar-group-count>
</sa-avatar-group>
<sa-avatar-group>
<sa-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Large"/>
<sa-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Large"/>
<sa-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Large"/>
<sa-avatar-group-count>+3</sa-avatar-group-count>
</sa-avatar-group>Group with icon count
The count element accepts any content, such as an icon for an "add" affordance.
Theme
<sa-avatar-group>
<sa-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Small"/>
<sa-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Small"/>
<sa-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Small"/>
<sa-avatar-group-count>
<sa-icon name="plus"/>
</sa-avatar-group-count>
</sa-avatar-group>
<sa-avatar-group>
<sa-avatar src="/avatars/avatar-1.jpg"/>
<sa-avatar src="/avatars/avatar-2.jpg"/>
<sa-avatar src="/avatars/avatar-3.jpg"/>
<sa-avatar-group-count>
<sa-icon name="plus"/>
</sa-avatar-group-count>
</sa-avatar-group>
<sa-avatar-group>
<sa-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Large"/>
<sa-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Large"/>
<sa-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Large"/>
<sa-avatar-group-count>
<sa-icon name="plus"/>
</sa-avatar-group-count>
</sa-avatar-group>In an empty state
Avatars and avatar groups can serve as the media of an Empty state.
Theme
<sa-empty class="w-full flex-none border">
<sa-empty-header>
<sa-empty-media>
<sa-avatar-group>
<sa-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Large"/>
<sa-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Large"/>
<sa-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Large"/>
<sa-avatar-group-count>
<sa-icon name="plus"/>
</sa-avatar-group-count>
</sa-avatar-group>
</sa-empty-media>
<sa-empty-title>No travellers yet</sa-empty-title>
<sa-empty-description>
Add the travellers who will be joining this trip.
</sa-empty-description>
</sa-empty-header>
<sa-empty-content>
<sa-button>
<sa-icon name="plus"/>
Add Traveller
</sa-button>
</sa-empty-content>
</sa-empty>API Reference
<sa-avatar>
Renders a <span> element containing either an <img> (when src is set) or a fallback <span> with the initials.
Prop
Type
<sa-avatar-badge>
Renders a <span> element positioned in the bottom-right corner of the parent avatar, sized to match the avatar's size.
<sa-avatar-group>
Renders a <div> element that overlaps its child avatars.
<sa-avatar-group-count>
Renders a <div> element displaying its child content (such as +3) at the end of an avatar group.