Avatar

<script setup lang="ts">
import MtAvatar from "@shopware-ag/meteor-component-library/MtAvatar";
</script>

<template>
  <mt-avatar first-name="John" last-name="Doe" size="m" variant="circle" />
</template>

Usage

Avatar represents a person or entity as a profile image or initials. Use it to identify users in lists, headers, menus, and chat threads, with an image when recognition matters and a profile picture is available, or initials as a lightweight fallback.

import { MtAvatar } from "@shopware-ag/meteor-component-library";

Examples

Sizes

<script setup lang="ts">
import MtAvatar from "@shopware-ag/meteor-component-library/MtAvatar";
</script>

<template>
  <mt-avatar first-name="John" last-name="Doe" size="2xs" />
  <mt-avatar first-name="John" last-name="Doe" size="xs" />
  <mt-avatar first-name="John" last-name="Doe" size="s" />
  <mt-avatar first-name="John" last-name="Doe" size="m" />
  <mt-avatar first-name="John" last-name="Doe" size="l" />
</template>

With image

<script setup lang="ts">
import MtAvatar from "@shopware-ag/meteor-component-library/MtAvatar";
</script>

<template>
  <mt-avatar image-url="/avatar.svg" size="m" />
</template>

Square

<script setup lang="ts">
import MtAvatar from "@shopware-ag/meteor-component-library/MtAvatar";
</script>

<template>
  <mt-avatar first-name="John" last-name="Doe" variant="square" size="m" />
</template>

All background colors

The background color is derived from the provided name, so repeated names get a stable color.

<script setup lang="ts">
import MtAvatar from "@shopware-ag/meteor-component-library/MtAvatar";
</script>

<template>
  <mt-avatar first-name="Jane" />
  <mt-avatar first-name="James" />
  <mt-avatar first-name="Amanda" />
  <mt-avatar first-name="Abigail" />
  <mt-avatar first-name="A" />
  <mt-avatar first-name="Jo" />
  <mt-avatar first-name="Joe" />
</template>

API reference

Props

Prop	Type	Default
`size`	`"m" \| "l" \| "s" \| "2xs" \| "xs"`	`"m"`
`first-name`	`string`	`undefined`
`last-name`	`string`	`undefined`
`image-url`	`string`	`undefined`
`variant`	`"circle" \| "square"`	`"circle"`

Slots

Slot	Bindings
`default`	`{}`

Best practices

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 sharper corners.

Don't

Do not treat Avatar as a clickable element, wrap it in a button or link if interaction is required.
Do not place long text inside Avatar, it should only contain initials or an image.
Do not oversize Avatar in dense layouts, this harms scanability.

Behavior

If no imageUrl is provided, Avatar falls back to initials derived from firstName and lastName.
The background color is derived from the provided name, which gives repeated names a stable visual treatment.
Avatar is presentational. If the avatar should trigger an action, place it inside an interactive wrapper instead of making the avatar itself responsible for interaction.

Accessibility

If the avatar is only decorative, keep it out of the interaction flow.
If the avatar represents an important person or entity, make sure the surrounding UI still exposes that identity in text.
When wrapping the avatar in an interactive control, ensure the control has a clear accessible name.

Edit this pageorReport an issue

Action Menu

A trigger-revealed list of contextual actions for a specific object or view.

Badge

A compact, non-interactive status label for short, glanceable states.