import { Meta } from "@storybook/blocks";

import * as AvatarStories from "./mt-avatar.stories";

<Meta of={AvatarStories} title="Components/mt-avatar" />

# 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