Avatar Component — Astro

Avatar Component

An accessible avatar for users: show a profile image when available, or initials derived from a name (or custom initials) when no image is provided. Supports multiple sizes and circle or square shape.

Add this component

The command below includes <strong>Avatar</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

bash bash Copy code

npx rizzo-css add Avatar

bash bash Copy code

pnpm dlx rizzo-css add Avatar

bash bash Copy code

npx rizzo-css add Avatar

bash bash Copy code

bunx rizzo-css add Avatar

Props

• src (string, optional) - Image URL; when provided, the image is shown
• alt (string, optional) - Alt text for the image
• name (string, optional) - Full name used to derive initials when no image (e.g. "Jane Doe" → "JD")
• initials (string, optional) - Override initials when no image (e.g. "JD"); ignored if name is provided
• size (string, optional) - sm, md, lg (default: md)
• shape (string, optional) - circle, square (default: circle)
• class (string, optional) - Additional CSS classes

Basic Usage (initials)

When no src is provided, use name to show initials (first letter of first and last word, or first two letters of a single word).

---
import Avatar from '../components/astro/Avatar.astro';
---

<Avatar name="Jane Doe" />
<Avatar name="Alice" />
<Avatar initials="AB" />

<!-- Rizzo CSS. No script needed. -->
<span class="avatar avatar--md avatar--circle" role="img" aria-label="Jane Doe"><span class="avatar__initials">JD</span></span>
<span class="avatar avatar--md avatar--circle" role="img" aria-label="Alice"><span class="avatar__initials">Al</span></span>

<script>
  import { Avatar } from '$lib/rizzo';
</script>

<Avatar name="Jane Doe" />
<Avatar name="Alice" />
<Avatar initials="AB" />

<script setup>
import Avatar from '@/components/rizzo/Avatar.vue';
</script>

<template>
  <Avatar name="Jane Doe" />
  <Avatar src="/photo.jpg" alt="Jane" />
</template>

import { Avatar } from './components/react';

<Avatar name="Jane Doe" />
<Avatar src="/photo.jpg" alt="Jane" />

Sizes

<Avatar name="Jane Doe" size="sm" />
<Avatar name="Jane Doe" size="md" />
<Avatar name="Jane Doe" size="lg" />

Shape

Use shape="square" for a rounded square; default is circle.

<Avatar name="Jane Doe" shape="circle" />
<Avatar name="Jane Doe" shape="square" />

With image

Pass src (and alt) to show a profile image. The image is scaled to cover the avatar with object-fit: cover.

Live Example (placeholder image)

<Avatar
  src="/path/to/photo.jpg"
  alt="Jane Doe"
  size="md"
/>

Features

• Accessible - role="img" and aria-label from alt, name, or initials
• Initials - Derived from name (e.g. "Jane Doe" → "JD") or set via initials
• Image - Optional src with loading="lazy" and object-fit: cover
• Sizes - sm, md, lg
• Shape - circle (default) or square with rounded corners

Other frameworks: Vanilla · Svelte · Vue · React