Avatar
Represents a person or a record with a small, round image. Without a photo, initials are generated from the name; colors, a status dot and an overlapping group view are supported.
Sizes
Choose xs or sm in dense tables and lists, the default md in menus and cards, and lg or xl in profile headers. The size is set with the size prop.
<div class="flex flex-wrap items-center gap-4">
<acun:avatar name="Ayşe Yılmaz" size="xs" />
<acun:avatar name="Ayşe Yılmaz" size="sm" />
<acun:avatar name="Ayşe Yılmaz" />
<acun:avatar name="Ayşe Yılmaz" size="lg" />
<acun:avatar name="Ayşe Yılmaz" size="xl" />
</div>| Prop | Values |
|---|---|
size | xs | sm | md | lg | xl |
Shapes
The default shape is a circle. For records that are not people, such as organizations, teams or products, use a square with rounded corners via shape="rounded-sm".
<div class="flex flex-wrap items-center gap-4">
<acun:avatar name="Ayşe Yılmaz" size="lg" />
<acun:avatar name="Acun Soft" size="lg" shape="rounded-sm" />
</div>| Prop | Values |
|---|---|
shape | circle | rounded-sm |
Initials and colors
Without a photo, the initials of the first two words in name are shown ("Ayşe Yılmaz" → AY). The background color is chosen with color; you can use different colors to tell people apart in the same list.
<div class="flex flex-wrap items-center gap-4">
<acun:avatar name="Ayşe Yılmaz" />
<acun:avatar name="Mehmet Kaya" color="success" />
<acun:avatar name="Zeynep Arslan" color="warning" />
<acun:avatar name="Emre Demir" color="danger" />
<acun:avatar name="Fatma Şahin" color="info" />
<acun:avatar name="Can Öztürk" color="secondary" />
</div>| Prop | Values |
|---|---|
name | Full name; the initials are generated from it |
color | primary | secondary | success | danger | warning | info | dark (brand = primary, neutral = secondary) |
Photo
When src is given, the photo is shown; name is still used as the alternative text. Remember to give name so that no blank space is left if the photo fails to load.
<acun:avatar src="{{ $user->avatar_url }}" :name="$user->name" size="lg" />| Prop | Values |
|---|---|
src | Photo address |
Status
status adds a small status dot at the bottom right: online, offline, away or busy. Suitable for chat and team lists.
<div class="flex flex-wrap items-center gap-4">
<acun:avatar name="Ayşe Yılmaz" status="online" />
<acun:avatar name="Mehmet Kaya" color="success" status="offline" />
<acun:avatar name="Zeynep Arslan" color="warning" status="away" />
<acun:avatar name="Emre Demir" color="danger" status="busy" />
</div>| Prop | Values |
|---|---|
status | online | offline | away | busy |
Groups
Show several people overlapping with acun:avatar-group. Add the number of people not shown as "+N" with more.
<acun:avatar-group :more="4">
<acun:avatar name="Ayşe Yılmaz" />
<acun:avatar name="Mehmet Kaya" color="success" />
<acun:avatar name="Zeynep Arslan" color="warning" />
<acun:avatar name="Emre Demir" color="info" />
</acun:avatar-group>| Prop | Values |
|---|---|
more | Number of people not shown ("+N"); hidden when 0 |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
src, name | null | Without a photo, initials from the name |
size | md | xs · sm · md · lg · xl |
shape | circle | circle · rounded-sm |
status | null | online · offline · away · busy |
color | primary | primary · secondary · success · danger · warning · info · dark (brand = primary, neutral = secondary) |
avatar-group: more | 0 | "+N" indicator |
avatar-group: size | md | Size of the "+N" indicator; give the same as the avatars (xs · sm · md · lg · xl) |