AVATAR
The Avatar component is a versatile and commonly used element in user interfaces, designed to represent users or entities visually. It can display images, initials, or icons, and can be customized in various ways, including size, tone, and variant, to suit different design needs. The avatar can also include notification indicators and badges for enhanced visual communication and can be disabled to prevent user interaction when necessary.
Basic Usage
A
vue
<template>
<spr-avatar />
</template>Notification
A
0
vue
<template>
<spr-avatar :notification="true" />
</template>Badge
A
0
vue
<template>
<spr-avatar :badge="true" />
</template>Image
0
0
vue
<template>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="2xl"
/>
</template>Sizes
avatar component has 7 different sizes. You can use the size prop to set the size of the avatar. The default size is 2xl. The available sizes are 2xl, xl, lg, md, sm, xs, 2xs.
0
0
0
0
0
0
vue
<template>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="2xl"
/>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="xl"
/>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="lg"
/>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="md"
/>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="sm"
/>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="xs"
/>
<spr-avatar
variant="image"
src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
:notification="true"
:badge="true"
size="2xs"
/>
</template>Variant
JC
JJ
A
JC
JC
J
J
+10
+2
+3
+4
+5
+6
+7
vue
<template>
<div class="spr-grid spr-gap-4">
<div class="spr-space-x-3">
<spr-avatar initial="Juan Dela Cruz" size="2xl" />
<spr-avatar initial="John Jay Joe" size="xl" />
<spr-avatar initial="Anthony" size="lg" />
<spr-avatar initial="Juan Dela Cruz" size="md" />
<spr-avatar initial="Juan Dela Cruz" size="sm" />
<spr-avatar initial="Juan Dela Cruz" size="xs" />
<spr-avatar initial="Juan Dela Cruz" size="2xs" />
</div>
<div class="spr-space-x-3">
<spr-avatar variant="count" count="10" color="secondary" size="2xl" />
<spr-avatar variant="count" count="2" color="secondary" size="xl" />
<spr-avatar variant="count" count="3" color="secondary" size="lg" />
<spr-avatar variant="count" count="4" color="secondary" size="md" />
<spr-avatar variant="count" count="5" color="secondary" size="sm" />
<spr-avatar variant="count" count="6" color="secondary" size="xs" />
<spr-avatar variant="count" count="7" color="secondary" size="2xs" />
</div>
<div class="spr-space-x-3">
<spr-avatar variant="user-group" size="2xl" />
<spr-avatar variant="user-group" size="xl" />
<spr-avatar variant="user-group" size="lg" />
<spr-avatar variant="user-group" size="md" />
<spr-avatar variant="user-group" size="sm" />
<spr-avatar variant="user-group" size="xs" />
<spr-avatar variant="user-group" size="2xs" />
</div>
<div class="spr-space-x-3">
<spr-avatar variant="user" size="2xl" />
<spr-avatar variant="user" size="xl" />
<spr-avatar variant="user" size="lg" />
<spr-avatar variant="user" size="md" />
<spr-avatar variant="user" size="sm" />
<spr-avatar variant="user" size="xs" />
<spr-avatar variant="user" size="2xs" />
</div>
<div class="spr-space-x-3">
<spr-avatar variant="client" size="2xl" />
<spr-avatar variant="client" size="xl" />
<spr-avatar variant="client" size="lg" />
<spr-avatar variant="client" size="md" />
<spr-avatar variant="client" size="sm" />
<spr-avatar variant="client" size="xs" />
<spr-avatar variant="client" size="2xs" />
</div>
</div>
</template>Slot
Slot can be used to add custom content to the avatar. note: adjust your custom content to fit the avatar size.
0
0
0
0
0
0
0
0
0
0
0
0
vue
<template>
<div>
<spr-avatar :notification="true" :badge="true" size="2xl" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="xl" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="lg" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="md" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="sm" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="xs" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="2xs" color="primary">
<Icon icon="ph:trash" />
</spr-avatar>
</div>
<div>
<spr-avatar :notification="true" :badge="true" size="2xl">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="xl">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="lg">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="md">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="sm">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="xs">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
<spr-avatar :notification="true" :badge="true" size="2xs">
<img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg" alt="User Avatar" />
</spr-avatar>
</div>
</template>
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
</script>Status
M
0
M
0
J
0
M
0
vue
<template>
<spr-avatar variant="initial" status="danger" initial="Matthew" :badge="true" size="2xl" />
<spr-avatar variant="initial" status="disabled" initial="Mark" :badge="true" size="2xl" />
<spr-avatar variant="initial" status="information" initial="John" :badge="true" size="2xl" />
<spr-avatar variant="initial" status="brand" initial="Mary" :badge="true" size="2xl" />
</template>Loading
vue
<template>
<div>
<spr-avatar loading size="2xl" />
<spr-avatar loading size="xl" />
<spr-avatar loading size="lg" />
<spr-avatar loading size="md" />
<spr-avatar loading size="sm" />
<spr-avatar loading size="xs" />
<spr-avatar loading size="2xs" />
</div>
</template>API Reference
Props
| Name | Description | Type | Default |
|---|---|---|---|
| variant | Defines the type of avatar to display:
| 'image' | 'initial' | 'client' | 'user' | 'user-group' | 'count' | 'initial' |
| src | URL for the avatar image when using variant="image". If not provided when using image variant, will fall back to the appropriate icon based on variant. | string | undefined |
| alt | Alternative text for the avatar image for accessibility. Important for screen readers to identify the avatar content. | string | 'Avatar' |
| size | Controls the size of the avatar, affecting dimensions, font size, and position of indicators:
| '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs' | '2xl' |
| notification | When true, displays a small notification indicator (badge) at the top-right corner of the avatar. The notification uses the danger variant color. | boolean | false |
| notificationText | Text to display in the notification indicator, typically a number. Only visible when notification is true. | string | '0' |
| badge | When true, displays a status badge at the bottom-right corner of the avatar. The badge color is determined by the status prop. | boolean | false |
| initial | Text to display when using variant="initial". The component automatically extracts initials based on these rules:
| string | 'Avatar' |
| color | Background color scheme for the avatar:
| 'primary' | 'secondary' | 'primary' |
| status | Status indicator type when badge is true:
| 'brand' | 'information' | 'danger' | 'disabled' | 'brand' |
| count | Numeric value to display when using variant="count". Will be displayed with a "+" prefix (e.g., "+10"). | number | 0 |
| loading | When true, displays a skeletal loading state animation instead of the actual avatar content. Useful for showing loading states while data is being fetched. | boolean | false |
Events
| Name | Description | Parameters |
|---|---|---|
| imageError | Emitted when the image source is not an image. |
Slots
| Name | Description |
|---|---|
| default | Custom content to display inside the avatar. This can be used to create custom avatars with icons, images, or other content. When this slot is provided, it takes precedence over the standard icon or initial display. The slot content will be wrapped in the same container as images or icons, with appropriate sizing and styling. Note: You should adjust your custom content to fit the avatar size, especially for the smaller size variants. |
Product Uses
