import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{u as i}from"./chunks/useMergeClasses.5cec3a4e.js";import{g as y,d as C,h as x,Y as j,$ as T,o as p,c as o,k as c,n as E,l as a,r as b,t as _,e as S,_ as P,H as s,w as u,a as w,Q as r}from"./chunks/framework.3f630664.js";const f={xs:"w-6 h-6",sm:"w-8 h-8",md:"w-10 h-10",lg:"w-20 h-20",xl:"w-36 h-36"},q={default:"rounded",rounded:"rounded-full"},z="ring-2 ring-gray-300 dark:ring-gray-500 p-1",$="absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800",V={away:"bg-gray-400",busy:"bg-yellow-400",offline:"bg-red-400",online:"bg-green-400"},I={"top-right-rounded":"top-0 -right-0.5","top-right-default":"-top-1.5 -right-1.5","top-left-rounded":"top-0 left-0","top-left-default":"top-0 left-0 transform -translate-y-1/2 -translate-x-1/2","bottom-right-rounded":"bottom-0 -right-0.5","bottom-right-default":"bottom-0 -right-1.5 translate-y-1/2","bottom-left-rounded":"bottom-0 left-0","bottom-left-default":"-bottom-1.5 left-0 transform -translate-x-1/2 "},N="absolute w-auto h-auto text-gray-400",M="flex overflow-hidden relative justify-center items-center",R="bg-gray-100 dark:bg-gray-600",J="font-medium text-gray-600 dark:text-gray-300",U={xs:"bottom-0",sm:"bottom-0",md:"-bottom-1",lg:"-bottom-2",xl:"-bottom-4"};function W(n){const t=y(()=>i([f[n.size.value],q[n.rounded.value?"rounded":"default"],n.bordered.value?z:"",n.stacked.value?"border-2 border-white dark:border-gray-800":""])),e=y(()=>{const m=`${n.statusPosition.value}-${n.rounded.value?"rounded":"default"}`;return i([$,V[n.status.value],I[m]])}),g=y(()=>i([N,U[n.size.value]])),d=y(()=>i([M,f[n.size.value],q[n.rounded.value?"rounded":"default"],n.img.value&&n.bordered.value?"":R,n.bordered.value?" overflow-visible":""])),F=y(()=>i([J]));return{avatarClasses:t,avatarDotClasses:e,avatarPlaceholderClasses:g,avatarPlaceholderInitialsClasses:F,avatarPlaceholderWrapperClasses:d}}const H={class:"relative"},O=["alt","src"],G=c("path",{"clip-rule":"evenodd",d:"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z","fill-rule":"evenodd"},null,-1),Q=[G],Y=["data-pos"],l=C({__name:"FwbAvatar",props:{alt:{type:String,default:"Avatar"},bordered:{type:Boolean,default:!1},img:{type:String,default:""},rounded:{type:Boolean,default:!1},size:{type:String,default:"md"},stacked:{type:Boolean,default:!1},status:{type:String,default:null},statusPosition:{type:String,default:"top-right"},initials:{type:String,default:null}},setup(n){const t=x(!1);function e(){t.value=!0}const g=j(),d=y(()=>g.placeholder),F=n,{avatarClasses:m,avatarDotClasses:B,avatarPlaceholderClasses:v,avatarPlaceholderInitialsClasses:A,avatarPlaceholderWrapperClasses:D}=W(T(F));return(k,Is)=>(p(),o("div",H,[c("div",{class:E(a(D))},[n.img&&!t.value?(p(),o("img",{key:0,alt:n.alt,class:E(a(m)),src:n.img,onError:e},null,42,O)):!n.initials&&d.value?(p(),o("div",{key:1,class:E(a(v))},[b(k.$slots,"placeholder")],2)):!n.img&&!n.initials?(p(),o("svg",{key:2,class:E(a(v)),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},Q,2)):(p(),o("div",{key:3,class:E(a(A))},_(n.initials),3))],2),n.status?(p(),o("span",{key:0,class:E(a(B)),"data-pos":n.statusPosition},null,10,Y)):S("",!0)]))}}),K={},L={class:"flex -space-x-4"};function X(n,t){return p(),o("div",L,[b(n.$slots,"default")])}const h=P(K,[["render",X]]),Z=["href"],ss=C({__name:"FwbAvatarStackCounter",props:{total:{type:Number,default:1},href:{type:String,default:"#"}},setup(n){return(t,e)=>(p(),o("a",{class:"relative flex justify-center items-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full border-2 border-white hover:bg-gray-600 dark:border-gray-800",href:n.href},"+"+_(n.total),9,Z))}}),as={class:"vp-raw flex justify-center space-x-4"},ns={__name:"FwbAvatarExample",setup(n){return(t,e)=>(p(),o("div",as,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:""})]))}},ls={class:"vp-raw flex justify-center"},ps={__name:"FwbAvatarExampleAlt",setup(n){return(t,e)=>(p(),o("div",ls,[s(a(l),{alt:"Alternative text",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"})]))}},os={class:"vp-raw flex justify-center space-x-4"},ts={__name:"FwbAvatarExampleBordered",setup(n){return(t,e)=>(p(),o("div",os,[s(a(l),{bordered:"",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{bordered:"",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:""})]))}},es={class:"vp-raw flex justify-center space-x-4"},cs=c("svg",{class:"w-12 h-12",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),rs=c("svg",{class:"w-12 h-12",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Es={__name:"FwbAvatarExampleIcon",setup(n){return(t,e)=>(p(),o("div",es,[s(a(l),null,{placeholder:u(()=>[cs]),_:1}),s(a(l),{rounded:""},{placeholder:u(()=>[rs]),_:1})]))}},ys={class:"vp-raw flex justify-center space-x-4"},is={__name:"FwbAvatarExampleInitials",setup(n){return(t,e)=>(p(),o("div",ys,[s(a(l),{initials:"JD"}),s(a(l),{initials:"JD",rounded:""})]))}},us={class:"vp-raw flex justify-center space-x-4"},gs={__name:"FwbAvatarExamplePlaceholder",setup(n){return(t,e)=>(p(),o("div",us,[s(a(l)),s(a(l),{rounded:""})]))}},ds={class:"vp-raw flex justify-center items-center space-x-4"},Fs={__name:"FwbAvatarExampleSize",setup(n){return(t,e)=>(p(),o("div",ds,[s(a(l),{size:"xs",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"sm",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"md",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"lg",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"xl",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"})]))}},ms={class:"vp-raw grid gap-2"},vs={__name:"FwbAvatarExampleStack",setup(n){return(t,e)=>(p(),o("div",ms,[s(a(h),null,{default:u(()=>[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-1.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-2.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-3.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-4.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"",stacked:""})]),_:1}),s(a(h),null,{default:u(()=>[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-1.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-2.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-3.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-4.jpg",rounded:"",stacked:""}),s(a(ss),{href:"#",total:99})]),_:1})]))}},fs={class:"vp-raw flex justify-center space-x-4"},qs={__name:"FwbAvatarExampleStatus",setup(n){return(t,e)=>(p(),o("div",fs,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"busy"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"away"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"offline"})]))}},hs={class:"vp-raw flex justify-center space-x-4"},Cs={__name:"FwbAvatarExampleStatusPosition",setup(n){return(t,e)=>(p(),o("div",hs,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"top-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"top-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"top-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"top-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"bottom-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"bottom-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"bottom-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"bottom-right",status:"online"})]))}},bs=c("h1",{id:"vue-avatar-flowbite",tabindex:"-1"},[w("Vue Avatar - Flowbite "),c("a",{class:"header-anchor",href:"#vue-avatar-flowbite","aria-label":'Permalink to "Vue Avatar - Flowbite"'},"")],-1),_s=c("p",null,"Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes",-1),ws=c("h2",{id:"default-avatar",tabindex:"-1"},[w("Default avatar "),c("a",{class:"header-anchor",href:"#default-avatar","aria-label":'Permalink to "Default avatar"'},"")],-1),Bs=c("p",null,"Use this example to create a circle and rounded avatar on an image element.",-1),As=r(`

vue

<template>
  <div class="flex justify-center space-x-4">
    <fwb-avatar img="/images/avatar-1.jpg" />
    <fwb-avatar img="/images/avatar-1.jpg" rounded />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

<template>
  <div class="flex justify-center space-x-4">
    <fwb-avatar img="/images/avatar-1.jpg" />
    <fwb-avatar img="/images/avatar-1.jpg" rounded />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

Bordered

Use this example to create a circle and rounded avatar on an image element.

`,3),Ds=r(`

vue

<template>
  <div class="flex justify-center space-x-4">
    <fwb-avatar bordered img="/images/avatar-1.jpg" />
    <fwb-avatar bordered img="/images/avatar-1.jpg" rounded />
  </div></template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

<template>
  <div class="flex justify-center space-x-4">
    <fwb-avatar bordered img="/images/avatar-1.jpg" />
    <fwb-avatar bordered img="/images/avatar-1.jpg" rounded />
  </div></template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

Dot indicator

Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).

`,3),ks=r(`

vue

<template>
  <div class="flex justify-center space-x-4">
    <fwb-avatar img="/images/avatar-1.jpg" status="online" />
    <fwb-avatar img="/images/avatar-1.jpg" status="busy" />
    <fwb-avatar img="/images/avatar-1.jpg" status="away" />
    <fwb-avatar img="/images/avatar-1.jpg" status="offline" />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

<template>
  <div class="flex justify-center space-x-4">
    <fwb-avatar img="/images/avatar-1.jpg" status="online" />
    <fwb-avatar img="/images/avatar-1.jpg" status="busy" />
    <fwb-avatar img="/images/avatar-1.jpg" status="away" />
    <fwb-avatar img="/images/avatar-1.jpg" status="offline" />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

Dot indicator position

`,2),xs=r(`

vue

<template>
  <div class="flex justify-center space-x-4">
    <fwb-avatar
      img="/images/avatar-1.jpg"
      status-position="top-left"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      rounded
      status-position="top-left"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      status-position="top-right"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      rounded
      status-position="top-right"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      status-position="bottom-left"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      rounded
      status-position="bottom-left"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      status-position="bottom-right"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      rounded
      status-position="bottom-right"
      status="online"
    />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

<template>
  <div class="flex justify-center space-x-4">
    <fwb-avatar
      img="/images/avatar-1.jpg"
      status-position="top-left"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      rounded
      status-position="top-left"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      status-position="top-right"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      rounded
      status-position="top-right"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      status-position="bottom-left"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      rounded
      status-position="bottom-left"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      status-position="bottom-right"
      status="online"
    />
    <fwb-avatar
      img="/images/avatar-1.jpg"
      rounded
      status-position="bottom-right"
      status="online"
    />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

Sizes

Choose from multiple sizing options for the avatar component from this example.

`,3),js=r(`

vue

<template>
  <div class="flex justify-center items-center space-x-4">
    <fwb-avatar size="xs" img="/images/avatar-1.jpg" />
    <fwb-avatar size="sm" img="/images/avatar-1.jpg" />
    <fwb-avatar size="md" img="/images/avatar-1.jpg" />
    <fwb-avatar size="lg" img="/images/avatar-1.jpg" />
    <fwb-avatar size="xl" img="/images/avatar-1.jpg" />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

<template>
  <div class="flex justify-center items-center space-x-4">
    <fwb-avatar size="xs" img="/images/avatar-1.jpg" />
    <fwb-avatar size="sm" img="/images/avatar-1.jpg" />
    <fwb-avatar size="md" img="/images/avatar-1.jpg" />
    <fwb-avatar size="lg" img="/images/avatar-1.jpg" />
    <fwb-avatar size="xl" img="/images/avatar-1.jpg" />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

Alternative text

`,2),Ts=r(`

vue

<template>
  <div class="flex justify-center">
    <fwb-avatar alt="Alternative text" img="/images/avatar-1.jpg" />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

<template>
  <div class="flex justify-center">
    <fwb-avatar alt="Alternative text" img="/images/avatar-1.jpg" />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

Stacked avatars

Use this example if you want to stack a group of users by overlapping the avatar components.

`,3),Ss=r(`

vue

<template>
  <div class="grid gap-2">
    <stacked-avatars>
      <fwb-avatar img="/images/avatar-1.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-2.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-3.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-4.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-5.jpg" rounded stacked />
    </stacked-avatars>
    <stacked-avatars>
      <fwb-avatar img="/images/avatar-1.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-2.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-3.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-4.jpg" rounded stacked />
      <stacked-avatars-counter href="#" total="99" />
    </stacked-avatars>
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

<template>
  <div class="grid gap-2">
    <stacked-avatars>
      <fwb-avatar img="/images/avatar-1.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-2.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-3.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-4.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-5.jpg" rounded stacked />
    </stacked-avatars>
    <stacked-avatars>
      <fwb-avatar img="/images/avatar-1.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-2.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-3.jpg" rounded stacked />
      <fwb-avatar img="/images/avatar-4.jpg" rounded stacked />
      <stacked-avatars-counter href="#" total="99" />
    </stacked-avatars>
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

Placeholder icon

`,2),Ps=r(`

vue

<template>
  <div class="flex justify-center space-x-4">
    <fwb-avatar />
    <fwb-avatar rounded />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

<template>
  <div class="flex justify-center space-x-4">
    <fwb-avatar />
    <fwb-avatar rounded />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

Placeholder initials

`,2),zs=r(`

vue

<template>
  <div class="flex justify-center space-x-4">
    <fwb-avatar initials="JD" />
    <fwb-avatar initials="JD" rounded />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

<template>
  <div class="flex justify-center space-x-4">
    <fwb-avatar initials="JD" />
    <fwb-avatar initials="JD" rounded />
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

Alternative Placeholder Icon

Use this example if you'd like to specify a different placeholder icon. Specify a #placeholder template slot to override the default placeholder icon. This has no effect if using initials.

`,3),$s=r(`

vue

<template>
  <div class="vp-raw flex justify-center space-x-4">
    <fwb-avatar>
      <template #placeholder>
        <svg class="w-12 h-12" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </template>
    </fwb-avatar>
    <fwb-avatar rounded>
      <template #placeholder>
        <svg class="w-12 h-12" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </template>
    </fwb-avatar>
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

<template>
  <div class="vp-raw flex justify-center space-x-4">
    <fwb-avatar>
      <template #placeholder>
        <svg class="w-12 h-12" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </template>
    </fwb-avatar>
    <fwb-avatar rounded>
      <template #placeholder>
        <svg class="w-12 h-12" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </template>
    </fwb-avatar>
  </div>
</template>

<script setup>
import { FwbAvatar } from 'flowbite-vue'
</script>

`,1),Js=JSON.parse('{"title":"Vue Avatar - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar.md","filePath":"components/avatar.md"}'),Vs={name:"components/avatar.md"},Us=Object.assign(Vs,{setup(n){return(t,e)=>(p(),o("div",null,[bs,_s,ws,Bs,s(ns),As,s(ts),Ds,s(qs),ks,s(Cs),xs,s(Fs),js,s(ps),Ts,s(vs),Ss,s(gs),Ps,s(is),zs,s(Es),$s]))}});export{Js as __pageData,Us as default};

Bordered ​

Dot indicator ​

Dot indicator position ​

Sizes ​

Alternative text ​

Stacked avatars ​

Placeholder icon ​

Placeholder initials ​

Alternative Placeholder Icon ​