Avatar

Avatar are used to show an inline alert or message.

Examples

Basic avatar with an image

P

Code

<template>
  <Avatar src="https://www.personizely.net/img/logo-icon.svg" fallback="P" />
</template>

<script setup lang="ts">
import { Avatar } from '@/components/ui/avatar'
</script>

Text fallback avatar

SC

Code

<template>
  <Avatar fallback="SC" />
</template>

<script setup lang="ts">
import { Avatar } from '@/components/ui/avatar'
</script>