Shows an image, or a fallback icon when there is none, in five sizes with two colours and an optional ring.
Ejemplos
Sizes and fallback
Five sizes from xs to xl. With no src the fallback icon shows; add a ring for emphasis or a gray theme. Pass src for a photo.
<div class="flex flex-wrap items-center gap-3">
<UiAvatar size="xs" />
<UiAvatar size="sm" />
<UiAvatar size="md" />
<UiAvatar size="lg" ring />
<UiAvatar size="xl" color="gray" fallback-icon="mdi:robot-outline" />
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| src | string | '' | Image URL. |
| alt | string | 'Avatar' | Alt text for the image. |
| size | string | 'md' | Avatar size. xssmmdlgxl |
| fallbackIcon | string | 'mdi:account' | Icon shown when there is no image. |
| color | string | 'primary' | Fallback background colour. primarygray |
| ring | boolean | false | Add a ring around the avatar. |