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

Use the src attribute to set an image as the avatar, or pass an <img> element into 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>

Source

The fit attribute controls how the image fits in its container. It works similarly to the native object-fit property.

Icon Avatar

Use the icon attribute to set a Material Icon for the avatar. Alternatively, pass an icon element into the default slot.

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

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

Source

Character Avatar

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

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

Source

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 CSS `object-fit` property. Possible values: `contain`: Scales the image to fit within the box while preserving aspect ratio. The image will be "letterboxed" if the aspect ratios do not match. `cover`: Scales the image to fill the box while preserving 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 may be stretched if aspect ratios do not match. `none`: No resizing. `scale-down`: Scales the image down to fit. Behaves like `none` or `contain`, whichever results in the smaller image.
`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 corner radius of the component. You can use a specific pixel value, but it is recommended to reference design tokens.

Others

Badge