DOM Studio

Component

Vue Avatar Component

<DomAvatar>

A compact identity primitive for people, teams, workspaces, and accounts.

Playground

Try every prop live

Avatar playground

Adjust the props to explore sizing, content, and behaviour.

Playground.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomAvatar } from '@getdom/studio';

const data = reactive({
		"src": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&crop=faces&w=96&h=96&q=80",
		"alt": "",
		"name": "Mina Patel",
		"initials": "MP",
		"size": "md",
		"shape": "circle"
	});
</script>

<template>
	<DomAvatar
		v-bind="data"
	/>
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
srcstringstring''Image URL.
altstringstring''Image alt text. Leave empty when adjacent text already names the person or object.
namestringstring''Name used to generate fallback initials.
initialsstringstring''Explicit fallback initials.
size'xs' | 'sm' | 'md' | 'lg' | 'xl'string'md'Avatar size.
shape'circle' | 'rounded' | 'square'string'circle'Avatar shape.

Auto-generated from Avatar.props and inline _edit hints.

Slots

NameScopeDescription
#fallback—Custom fallback content when no image is available.