Default Gray Amethyst

Avatar

<mo-avatar> | MOAvatar
Since 1.0 experimental

Avatars are used to represent a person or object.

Like images, you should always provide alt text for avatars as alternate text for assistive devices. 

<mo-avatar label="User avatar"></mo-avatar>

import { MOAvatar } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOAvatar label="User avatar" />;

Examples

Images

To use an image for the avatar, set the image and alt attributes. This will take priority and be shown over initials and icons. 

<mo-avatar
  image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
  label="Avatar of a gray tabby kitten looking down"
></mo-avatar>

import { MOAvatar } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOAvatar
    image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
    label="Avatar of a gray tabby kitten looking down"
  />
);

Initials

When you don’t have an image to use, you can set the initials attribute to show something more personalized than an icon. 

<mo-avatar initials="MO" label="Avatar with initials: MO"></mo-avatar>

import { MOAvatar } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOAvatar initials="MO" label="Avatar with initials: MO" />;

Custom icons

When no image or initials are set, an icon will be shown. The default avatar shows a generic “user” icon, but you can customize this with the icon slot. 

<mo-avatar label="Avatar with an image icon">
  <mo-icon slot="icon" name="image"></mo-icon>
</mo-avatar>

<mo-avatar label="Avatar with a settings icon">
  <mo-icon slot="icon" name="settings"></mo-icon>
</mo-avatar>

<mo-avatar label="Avatar with a filled person icon">
  <mo-icon slot="icon" name="person-fill"></mo-icon>
</mo-avatar>

import { MOAvatar, MOIcon } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    <MOAvatar label="Avatar with an image icon">
      <MOIcon slot="icon" name="image" />
    </MOAvatar>

    <MOAvatar label="Avatar with a settings icon">
      <MOIcon slot="icon" name="settings" />
    </MOAvatar>

    <MOAvatar label="Avatar with a filled person icon">
      <MOIcon slot="icon" name="person-fill" />
    </MOAvatar>
  </>
);

Shapes

Avatars can be shaped using the shape attribute.

<mo-avatar shape="octagon" label="Octagon avatar"></mo-avatar>
<mo-avatar shape="square" label="Square avatar"></mo-avatar>
<mo-avatar shape="rounded" label="Rounded avatar"></mo-avatar>
<mo-avatar shape="circle" label="Circle avatar"></mo-avatar>

import { MOAvatar, MOIcon } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    <MOAvatar shape="octagon" label="Octagon avatar" />
    <MOAvatar shape="square" label="Square avatar" />
    <MOAvatar shape="rounded" label="Rounded avatar" />
    <MOAvatar shape="circle" label="Circle avatar" />
  </>
);

Avatar groups

You can group avatars with a few lines of CSS.

<div class="avatar-group">
  <mo-avatar
    shape="circle"
    image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
    label="Avatar 1 of 4"
  ></mo-avatar>

  <mo-avatar
    shape="circle"
    image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
    label="Avatar 2 of 4"
  ></mo-avatar>

  <mo-avatar
    shape="circle"
    image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
    label="Avatar 3 of 4"
  ></mo-avatar>

  <mo-avatar
    shape="circle"
    image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
    label="Avatar 4 of 4"
  ></mo-avatar>
</div>

<style>
  .avatar-group mo-avatar:not(:first-of-type) {
    margin-left: -1rem;
  }

  .avatar-group mo-avatar::part(base) {
    border: solid 2px var(--color-docs-background);
  }
</style>

import { MOAvatar, MOIcon } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .avatar-group mo-avatar:not(:first-of-type) {
    margin-left: -1rem;
  }

  .avatar-group mo-avatar::part(base) {
    border: solid 2px var(--color-docs-background);
  }
`;

const App = () => (
  <>
    <div className="avatar-group">
      <MOAvatar
        shape="circle"
        image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
        label="Avatar 1 of 4"
      />

      <MOAvatar
        shape="circle"
        image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
        label="Avatar 2 of 4"
      />

      <MOAvatar
        shape="circle"
        image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
        label="Avatar 3 of 4"
      />

      <MOAvatar
        shape="circle"
        image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
        label="Avatar 4 of 4"
      />
    </div>

    <style>{css}</style>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/avatar/avatar.js';

To import this component as a React component:

import MOAvatar from '@metsooutotec/modes-web-components/dist/react/avatar/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/avatar/avatar.js"></script>

Slots

Name Description
icon The default icon to use when no image or initials are present.

Learn more about using slots.

Properties

Name Description Reflects Type Default
image The image source to use for the avatar. string | undefined -
label A label to use to describe the avatar to assistive devices. string ''
initials Initials to use as a fallback when no image is available (1–2 characters max recommended). string | undefined -
shape The shape of the avatar. 'octagon' | 'circle' | 'square' | 'rounded' 'octagon'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name Description Default
--size The size of the avatar.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s internal wrapper.
icon The container that wraps the avatar icon.
initials The container that wraps the avatar initials.
image The avatar image.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.