Salfati Group UI Library

<k-avatar size="xs" />

<k-avatar :src="avatarSrc" size="sm" />

<k-avatar :src="noAvatarSrc" variant="rounded" size="md" />

<k-avatar
  :src="avatarSrc"
  :notificationProps="{ color: 'gray', position: 'top-right' }"
  size="lg"
/>

<k-avatar
  :src="avatarSrc"
  :notificationProps="{ color: 'green', position: 'bottom-right' }"
  size="xl"
/>

<k-avatar
  :src="avatarSrc"
  variant="rounded"
  :notificationProps="{ color: 'green', position: 'bottom-right' }"
  size="2xl"
/>

<k-avatar
  :notificationProps="{ color: 'red', position: 'top-left' }"
  size="xl"
/>

<div class="flex space-x-2">
  <k-avatar placeholderInitials="JD" size="xs" />
  <k-avatar placeholderInitials="JD" size="sm" />
  <k-avatar placeholderInitials="JD" size="md" />
  <k-avatar placeholderInitials="JD" size="lg" />
  <k-avatar placeholderInitials="JD" size="xl" />
  <k-avatar placeholderInitials="JD" size="2xl" />
</div>

Tom Cook

Software Engineer, Google

<k-avatar
  :src="avatarSrc"
  size="md"
  title="Tom Cook"
  description="Software Engineer, Google"
/>

<div class="isolate flex -space-x-2 overflow-hidden">
  <k-avatar class="rounded-full ring-2 ring-white" :src="avatar4Src" />
  <k-avatar class="rounded-full ring-2 ring-white" :src="avatar2Src" />
  <k-avatar class="rounded-full ring-2 ring-white" :src="avatar3Src" />
  <k-avatar class="rounded-full ring-2 ring-white" :src="avatarSrc" />
</div>

<script setup lang="ts">
const avatarSrc =
  'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
const avatar2Src =
  'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
const avatar3Src =
  'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80'
const avatar4Src =
  'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
const noAvatarSrc =
  'https://media.licdn.com/dms/image/D4D03AQFU535XzNJURg/profile-displayphoto-shrink_800_800/0/1677953208954?e=1695859200&v=beta&t=3CTQPNhf2qkQEmpIm6QWzoKtn1m01CG31UTnD8RMQo4'
</script>