User

Experimental. The API may still change in a future release.

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

<template>
  <div class="user-example">
    <mt-user name="Mila Hoffmann" subtitle="mila.hoffmann@example.com" />
  </div>
</template>

<style scoped>
.user-example {
  max-width: 15rem;
}
</style>

Usage

User identifies a person with an Avatar, their name and an optional secondary line such as a role, an email address or a workspace. Use it in places that show who is signed in or who did something, such as the footer of a sidebar navigation or a user menu.

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

Examples

Avatar only

avatar-only hides the name and the subtitle visually, for example in a collapsed sidebar. The suffix slot stays visible.

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

<template>
  <mt-user name="Mila Hoffmann" subtitle="mila.hoffmann@example.com" avatar-only />
</template>

With an action

The suffix slot holds trailing content, such as a menu trigger.

<script setup lang="ts">
import {
  MtButton,
  MtIcon,
  MtUser,
} from "@shopware-ag/meteor-component-library";
</script>

<template>
  <div class="user-example">
    <mt-user name="Mila Hoffmann" subtitle="mila.hoffmann@example.com">
      <template #suffix>
        <mt-button
          variant="tertiary"
          size="small"
          square
          aria-label="Account menu"
        >
          <mt-icon name="regular-ellipsis-v" size="var(--scale-size-16)" />
        </mt-button>
      </template>
    </mt-user>
  </div>
</template>

<style scoped>
.user-example {
  max-width: 15rem;
}
</style>

API reference

Props

Prop	Type	Default
`name` * The display name. The avatar shows the initials of its first and last word.	`string`
`subtitle` A secondary line below the name, such as a role, an email address or a workspace.	`string`	`undefined`
`image-url` An image for the avatar instead of the initials.	`string`	`undefined`
`avatar-only` Hides the name and the subtitle visually, for example in a collapsed sidebar. They stay available to assistive technology, and the `suffix` slot stays visible.	`false \| true`	`false`

Slots

Slot	Bindings
`suffix` Trailing content, such as a menu trigger or an action.	`any`

Best practices

Keep the subtitle to one short piece of information, such as a role or an email address.
Give an icon-only action in the suffix slot an accessible name.

Don't

Do not put several interactive elements inside User; add one action in the suffix slot.

Behavior

The avatar shows the initials of the first and last word of name, or image-url when it is set.
Long names and subtitles are cut off with an ellipsis on one line.

Accessibility

The avatar is hidden from assistive technology, because the name is shown as text next to it.
With avatar-only, the name and the subtitle are hidden visually but stay available to assistive technology.

Avatar: when only a profile image or initials are needed, without a name.

Edit this pageorReport an issue

URL Field

A single-line input for entering and normalizing a web address.

Inset

A layout utility that lets content break out to the edges of a padded container, such as a Card, by consuming the container's inset spacing variables.