# mds-avatar ## Properties | Property | Attribute | Description | Type | Default | | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `count` | `count` | The user's inizials displayed if there's no image available, initials will override tone and variant senttings to keep user recognizable from others | `number \| undefined` | `undefined` | | `icon` | `icon` | Specifies the path to the icon | `string \| undefined` | `undefined` | | `initials` | `initials` | The user's inizials displayed if there's no image available, initials will override tone and variant senttings to keep user recognizable from others | `string \| undefined` | `undefined` | | `src` | `src` | Specifies the path to the image | `string \| undefined` | `undefined` | | `tone` | `tone` | Specifies the color tone of the component | `"strong" \| "weak" \| undefined` | `undefined` | | `variant` | `variant` | Specifies the color variant of the component | `"amaranth" \| "aqua" \| "blue" \| "error" \| "green" \| "info" \| "lime" \| "orange" \| "orchid" \| "primary" \| "sky" \| "success" \| "violet" \| "warning" \| "yellow" \| undefined` | `undefined` | ## Shadow Parts | Part | Description | | ----------- | ------------------------------------------ | | `"icon"` | The selected icon of the avatar | | `"wrapper"` | The wrapper which contains media displayed | ## CSS Custom Properties | Name | Description | | --------------------------------------- | --------------------------------------------- | | `--mds-avatar-background-color` | The background-color of the component | | `--mds-avatar-background-color-pending` | The background-color when an image is loading | | `--mds-avatar-color` | The color of the placeholder icon | | `--mds-avatar-radius` | The border-radius of the element | ---------------------------------------------- Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)