Docs
Avatar

Avatar

An image element with a fallback for representing the user.

Component Source Primitive API Reference

Usage ​

vue
<script setup lang="ts">
import { Avatar } from "wedges-vue";
</script>

<template>
  <Avatar
    alt="Image alt text"
    src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop"
  />
</template>

API Reference ​

Avatar ​

Represents an avatar image. Extends the Radix Avatar Image primitive and includes all of its props.

Props ​

PropTypeDefault
alt
string
initials
string
''
notification
'gray' | 'primary' | 'green' | 'yellow' | 'red' | null
size
'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | null
src
string
status
'gray' | 'primary' | 'green' | 'yellow' | 'red' | null

Examples ​

The following example shows an Avatar component with an image, size set to lg, using initials "MQ" as a fallback, and status and notification set to different colors.

MQ

The following examples show different variants of the Avatar component.


WEdgES

The following example shows more advanced usage of the Avatar component and how you can customize it with Tailwind CSS classes.

MQ
Edit this page on GitHub