A user's picture, initials, or icon using
class="avatar".
Works with
Badge- Status indicator in the corner
Standalone
<link rel="stylesheet" href="https://esm.sh/@erikt/ui/avatar.css" />Default
<img class="avatar" src="/avatar.jpg" alt="" />Fallback
Skip the <img> and use initials or an icon instead.
JR
<span class="avatar">JR</span>
<span class="avatar">
<svg><!-- icon --></svg>
</span>Square
<img class="avatar square" src="/avatar.jpg" alt="" />Status
Nest a <span class="badge"> inside the avatar to
show a presence dot in the corner. Any
Badge color modifier works.
<button class="avatar secondary">
<img src="/avatar.jpg" alt="" />
<span class="badge constructive">
<svg><!-- icon --></svg>
</span>
</button>Group
Adjacent avatars automatically overlap into a stack, no wrapper needed.
<img class="avatar" src="/a.jpg" alt="" />
<img class="avatar" src="/b.jpg" alt="" />
<img class="avatar" src="/c.jpg" alt="" />
<span class="avatar">+3</span>With tooltip
See the Tooltip page for placement options.
<span class="avatar" data-tooltip aria-label="Jordan Rivera">
<img src="/avatar.jpg" alt="" />
</span>With popover
See the Popover page for more variants.
<button class="avatar secondary" popovertarget="avatar-menu">
<img src="/avatar.jpg" alt="" />
</button>
<div id="avatar-menu" popover>
<menu>
<li><small>Jordan Rivera</small></li>
<li><button class="ghost">Profile</button></li>
<li><button class="ghost">Settings</button></li>
<li><hr /></li>
<li><button class="ghost destructive">Sign out</button></li>
</menu>
</div>API reference
| Type | Classes / attributes | What it does |
|---|---|---|
| Shape | .square |
Rounded square instead of a circle |