Avatars
Represent a user or entity with an image, initials, or icon across a range of sizes and shapes, and combine several into a stacked group.
Avatar Sizes
XSSMMDLGXL2XL
Avatar with Status
JDABCDEF
Avatar Group
ABCD+5
Usage
<script setup lang="ts">
import { VdAvatar } from "@vanduo-oss/vd3";
</script>
<template>
<VdAvatar initials="AL" />
<VdAvatar src="/ada.jpg" alt="Ada Lovelace" size="lg" status="online" />
<VdAvatar initials="JS" variant="success" shape="rounded" />
</template>API Reference
| Class Name | Description | Type |
|---|---|---|
.vd-avatar | Base component class required for all Vanduo avatars. | Component |
.vd-avatar-[size] | Size modifier class (e.g., -xs, -sm, -lg, -xl, -2xl). Defaults to medium if omitted. | Modifier |
.vd-avatar-status-[status] | Adds a status indicator badge (e.g., -online, -offline, -busy, -away). | Modifier |
.vd-avatar-group | Wrapper class for grouping multiple avatars together with overlapping margins. | Layout |
Component API (Vue 3)
| Prop | Description |
|---|---|
:src / :alt | Image source and alt text. |
:initials | Fallback initials shown when there is no image. |
:size | xs | sm | md | lg | xl | 2xl (default md). |
:variant | Initials background colour: primary | secondary | success | warning | error | info (default primary). |
:shape | circle | rounded | square (default circle). |
:status | online | offline | away | busy — renders a presence dot. |