Avatar

An easily stylable avatar component.

LT LT

CSSTailwind CSS

<script setup lang="ts">
import { AvatarFallback, AvatarImage, AvatarRoot } from 'base-ui-vue'
</script>

<template>
  <div class="flex gap-5">
    <AvatarRoot
      class="inline-flex size-12 items-center justify-center overflow-hidden rounded-full bg-gray-100 align-middle text-base font-medium text-gray-900 select-none"
    >
      <AvatarImage
        src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
        class="object-cover size-full"
      />
      <AvatarFallback class="flex items-center justify-center size-full text-base">
        LT
      </AvatarFallback>
    </AvatarRoot>

    <AvatarRoot
      class="inline-flex items-center justify-center align-middle rounded-full select-none font-medium text-gray-900 bg-gray-100 text-base overflow-hidden size-12"
    >
      LT
    </AvatarRoot>
  </div>
</template>

Anatomy

Import the component and assemble its parts:

<script setup>
import { AvatarFallback, AvatarImage, AvatarRoot } from 'base-ui-vue'
</script>

<template>
  <AvatarRoot>
    <AvatarImage src="" />
    <AvatarFallback>LT</AvatarFallback>
  </AvatarRoot>
</template>

API reference

Root

Displays a user's profile picture, initials, or fallback icon. Renders a <span> element.

Prop	Default	Type
as	'span'	string | Component The element or component to use for the root node.
class	—	string | ((state: State) => string) CSS class applied to the element, or a function that returns a class based on the component's state.
style	—	StyleValue | ((state: State) => StyleValue) Style applied to the element, or a function that returns a style object based on the component's state.

Image

The image to be displayed in the avatar. Renders an <img> element.

Prop	Default	Type
as	'img'	string | Component The element or component to use for the root node.
src	—	string The image source.
referrerPolicy	—	string The referrer policy for the image.
crossOrigin	—	string The cross origin attribute for the image.
class	—	string | ((state: State) => string) CSS class applied to the element, or a function that returns a class based on the component's state.
style	—	StyleValue | ((state: State) => StyleValue) Style applied to the element, or a function that returns a style object based on the component's state.

Emits	Type	Description
loadingStatusChange	((status: ImageLoadingStatus) => void) | undefined	Callback fired when the loading status changes.

Attribute	Description
data-starting-style	Present when the image is animating in.
data-ending-style	Present when the image is animating out.

Fallback

Rendered when the image fails to load or when no image is provided. Renders a <span> element.

Prop	Default	Type
as	'span'	string | Component The element or component to use for the root node.
delay	—	number How long to wait before showing the fallback. Specified in milliseconds.
class	—	string | ((state: State) => string) CSS class applied to the element, or a function that returns a class based on the component's state.
style	—	StyleValue | ((state: State) => StyleValue) Style applied to the element, or a function that returns a style object based on the component's state.