ui/docs/content/2.elements/1.avatar.md

description, links

description	links
Display an image that represents a resource or a group of resources.	label icon to GitHub i-simple-icons-github https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Avatar.vue

Usage

::component-card

props: src: 'https://avatars.githubusercontent.com/u/739984?v=4' alt: 'Avatar'

::

Size

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

::component-card

props: size: 'sm' baseProps: src: 'https://avatars.githubusercontent.com/u/739984?v=4' alt: 'Avatar'

::

Chip

Use the chip-color, chip-text :u-badge{label="New" class="!rounded-full"} and chip-position props to display a chip on the Avatar.

::component-card

props: chipColor: 'primary' chipText: '' chipPosition: 'top-right' size : 'sm' extraColors:

• gray baseProps: src: 'https://avatars.githubusercontent.com/u/739984?v=4' alt: 'Avatar'

---

::

Placeholder

If there is an error loading the src of the avatar or src is null a background placeholder will be displayed, customizable in ui.avatar.background.

If there's an alt prop initials will be displayed on top of the background, customizable in ui.avatar.placeholder.

::component-card

props: alt: 'Benjamin Canac' size: 'sm'

::

Group

To stack avatars as a group, use the AvatarGroup component.

• To limit the amount of avatars to show, use the max prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars)
• To size all the avatars equally, pass the size prop
• To adjust the spacing or the ring between avatars, customize with ui.avatarGroup.margin or ui.avatarGroup.ring

::component-card

props: size: 'sm' max: 2 ui: size: '3xs': '' '2xs': '' xs: '' sm: '' md: '' lg: '' xl: '' '2xl': '' '3xl': '' code: |

#default :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"} :u-avatar{src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Avatar"} :u-avatar{src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="Avatar"} ::

Props

:component-props

Preset

:component-preset