Avatar

Avatars represent users or entities by displaying images, icons, or characters.

Usage

Import the component:

import 'mdui/components/avatar.js';

Import the TypeScript type:

import type { Avatar } from 'mdui/components/avatar.js';

Example:

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

Examples

Image Avatar

To use an image as the avatar, specify the image link using the src attribute, or provide an <img> element within the default slot.

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

<mdui-avatar>
  <img src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4" alt="Example of profile picture"/>
</mdui-avatar>

Code

The fit attribute determines how the image should fit the container box. It works similar to the native object-fit property.

Icon Avatar

To use a Material Icons icon as the avatar, specify the icon using the icon attribute. Alternatively, provide an icon element within the default slot.

<mdui-avatar icon="people_alt"></mdui-avatar>

<mdui-avatar>
  <mdui-icon name="people_alt"></mdui-icon>
</mdui-avatar>

Code

Character Avatar

You can use any text within the default slot as the avatar.

<mdui-avatar>A</mdui-avatar>

Code

API

Properties

Attribute	Property	Type	Default
`src`	`src`	`string`	-
URL of the avatar image.
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
Image resizing method, similar to the native CSS `object-fit`. Possible values: `contain`: Scales the image to fit within the box while maintaining the aspect ratio. The image will be "letterboxed" if the aspect ratios do not match. `cover`: Scales the image to fill the box while maintaining the aspect ratio. The image will be clipped if the aspect ratios do not match. `fill`: Default. Scales the image to fill the box. The image will be stretched if the aspect ratios do not match. `none`: No resizing. `scale-down`: Scales as if `none` or `contain` were specified, choosing the smaller result.
`icon`	`icon`	`string`	-
The Material Icons name for the avatar.
`label`	`label`	`string`	-
Text description of the avatar.

Slots

Name
(default)
Custom avatar content, such as letters, `<img>` elements, icons, etc.

CSS Parts

Name
`image`
Internal `<img>` element when using an image avatar.
`icon`
Internal `<mdui-icon>` element when using an icon avatar.

CSS Custom Properties

Name
`--shape-corner`
The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

Others

Up Next

Badge