DisplayBrowse display components
Avatar
Circular user identity. Sizes xs–xl, image fallback, group with overlap, status dot.
Live preview
ALMKRS
ALMK+5
Usage
Adapters:React stableVue stable
index.html
<div class="lm-avatar-group">
<span class="lm-avatar lm-avatar-sm">AL</span>
<span class="lm-avatar lm-avatar-sm">MK</span>
<span class="lm-avatar-stack-more">+5</span>
</div>CSS classes (5)
| Class | Description |
|---|---|
lm-avatar | Base circle |
lm-avatar-{size} | xs | sm | md | lg | xl |
lm-avatar-group | Inline-flex wrapper with overlapping margins |
lm-avatar-stack-more | Overflow chip ('+5') |
lm-avatar-status | Bottom-right colored dot |
React props (4)
| Prop | Type | Default | Description |
|---|---|---|---|
size | Size | md | — |
src | string | — | Image URL |
alt | string | — | Image alt text |
fallback | string | — | Initials when image missing |
Accessibility
- Use alt text on <img>; provide aria-label if avatar is interactive.
- Decorative avatars can use alt='' or role='presentation'.
Spotted something wrong? Edit this entry on GitHub.