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

description, links

description	links
An image element with fallback.	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/benjamincanac/ui3/tree/dev/src/runtime/components/Avatar.vue

Usage

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://avatars.githubusercontent.com/u/739984?v=4'

::

Size

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

::component-code

ignore:

• src props: src: 'https://avatars.githubusercontent.com/u/739984?v=4' size: xl

---

::

Icon

Use the icon prop to display a fallback Icon.

::component-code

props: icon: 'i-heroicons-photo' 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 will be used as fallback.

::component-code

props: alt: 'Benjamin Canac' size: md

::

::note The alt prop will be used as the alt attribute of the image. ::

Examples

With tooltip

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

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

With chip

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

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

API

Props

:component-props

Theme

:component-theme