ui/docs/content/3.components/avatar.md

description, links

description	links
An img element with fallback and Nuxt Image support.	label icon to Avatar i-custom-radix-vue https://www.radix-vue.com/components/avatar.html label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/tree/v3/src/runtime/components/Avatar.vue

Usage

::tip The Avatar uses the NuxtImg component when @nuxt/image is installed, falling back to img otherwise. ::

Src

Use the src prop to set the image URL. You can pass any property from HTML <img> element such as alt, loading, etc.

::component-code

props: src: 'https://github.com/benjamincanac.png'

::

Size

Use the size prop to set the size of the Avatar.

::component-code

ignore:

• src props: src: 'https://github.com/benjamincanac.png' size: xl

---

::

::note The <img> element's width and height are automatically set based on the size prop. ::

Icon

Use the icon prop to display a fallback Icon.

::component-code

props: icon: 'i-lucide-image' size: md

::

Text

Use the text prop to display a fallback text.

::component-code

props: text: '+1' size: md

::

Alt

When no icon or text is provided, the initials of the alt prop is used as fallback.

::component-code

props: alt: 'Benjamin Canac' size: md

::

::note The alt prop is passed to the img element as the alt attribute. ::

Examples

With tooltip

You can use a Tooltip component to display a tooltip when hovering the Avatar.

:component-example{name="avatar-tooltip-example"}

With chip

You can use a Chip component to display a chip around the Avatar.

:component-example{name="avatar-chip-example"}

API

Props

:component-props

Theme

:component-theme