Identity

Avatar

One fixed box for a person or entity: image, derived initials, or icon — never a shifting layout.

Playground

Configure the component and copy synchronized Vue code.

Properties

Size

Shape

Variant

Content

Vue

<m-avatar
  name="Ada Lovelace"
/>

Token map

The manual manifest combines inherited token owners with local deltas.

Search tokens

MAvatar · All22 tokens

md-avatar

md-avatar-sm-sizeg($t, 'sm-size')

Resolved value24rem

md-avatar-md-sizeg($t, 'md-size')

Resolved value40rem

md-avatar-lg-sizeg($t, 'lg-size')

Resolved value56rem

md-avatar-shape-fullg($t, 'shape-full')

System token--sys-shape-corner-full

md-avatar-shape-largeg($t, 'shape-large')

System token--sys-shape-corner-large

md-avatar-shape-mediumg($t, 'shape-medium')

System token--sys-shape-corner-medium

md-avatar-shape-smallg($t, 'shape-small')

System token--sys-shape-corner-small

md-avatar-image-fitg($t, 'image-fit')

Resolved valuecover

md-avatar-outlined-outline-widthg($t, 'outlined-outline-width')

Resolved value1rem

md-avatar-tonal-container-colorg($t, 'tonal-container-color')

System token--md-sys-color-primary-container

md-avatar-tonal-content-colorg($t, 'tonal-content-color')

System token--md-sys-color-on-primary-container

md-avatar-filled-container-colorg($t, 'filled-container-color')

System token--md-sys-color-primary

md-avatar-filled-content-colorg($t, 'filled-content-color')

System token--md-sys-color-on-primary

md-avatar-outlined-container-colorg($t, 'outlined-container-color')

Resolved valuetransparent

md-avatar-outlined-content-colorg($t, 'outlined-content-color')

System token--md-sys-color-on-surface-variant

md-avatar-outlined-outline-colorg($t, 'outlined-outline-color')

System token--md-sys-color-outline-variant

MAvatar API

Props, slots, and events are generated from the current public kit contract.

MAvatar

Utility family

src/runtime/components/ui/avatar

Props

NameTypeDefault

sizeComponent size on the shared small, medium, and large scale.

'sm' | 'md' | 'lg''md'

srcImage source. An empty or failing source enters the fallback pipeline.

stringundefined

altAlternative text of the image. A non-empty string names the image; `''` marks it decorative; omitting it lets `name` label the avatar root.

stringundefined

nameDisplay name used for derived initials and the accessible label.

stringundefined

iconExplicit fallback icon, used when no initials can be derived.

stringundefined

shapeMD3 corner shape.

Extract<MShape, 'full' | 'large' | 'medium' | 'small'>'full'

variantMD3 surface preset.

'tonal' | 'filled' | 'outlined''tonal'

Slots

Events

@loadEvent

@errorEvent