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.

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.

Character Avatar

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

API

Properties

AttributePropertyReflectTypeDefault
srcsrcstring-

URL of the avatar image.

fitfit'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.
iconiconstring-

The Material Icons name for the avatar.

labellabelstring-

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.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons