UNPKG

@shopware-ag/meteor-component-library

Version:

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

github.com/shopware/meteor

shopware/meteor

22 lines (14 loc) • 947 B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Avatar The `Avatar` component represents a person or entity in a compact visual form, it can show a profile image or initials derived from a name. Avatars help users recognize people quickly in lists, comments, messages, and navigation areas. ### ✅ Do's --- - Use `mt-avatar` to identify users or entities in lists, headers, menus, and chat threads - Provide an `imageUrl` when possible, photos improve recognition - Rely on initials when no image is available, they are concise and readable - Pick a size that fits the layout, for example `s` for dense lists or `l` for profile headers - Use the `square` variant when the surrounding UI uses sharp corners ### ❌ Don'ts --- - Don’t treat avatars as clickable elements, wrap them in a button or link if interaction is required - Don’t place long text inside an avatar, it should only contain initials or an image - Don’t oversize avatars in dense layouts, this harms scanability