Preview

Installation

npx sigma-ui@latest add avatar

Usage

<script setup lang="ts">
import { Avatar } from '@/components/ui/avatar';
</script>

<template>
  <Avatar
    src="/avatars/avatar.png"
    alt="User avatar"
  />
</template>

• size sets the dimensions: xs, sm, base (default), or lg.
• shape is circle (default) or rounded.
• If the image fails to load and you don't provide a #fallback slot, a default profile icon is rendered.

Examples

Basic

An avatar with just the src prop.

Glow

The glow prop adds a glowing effect to the image.

Custom fallback

Use the #fallback slot to provide custom content to show when the image fails to load.

API Reference

Avatar

Props

Prop	Type	Default
src URL of the avatar image.	string	-
alt Alternative text for the image.	string	-
glow Renders a blurred, saturated copy of the image behind it as a glow.	boolean	-
size Size of the avatar.	"base" | "xs" | "sm" | "lg"	"base"
shape Corner style of the avatar: circle or rounded.	"circle" | "rounded" | null	"circle"

Slots

Slot	Scope
fallback Content shown when there is no image or it fails to load; defaults to a user icon.	-

Accessibility

Renders an img element, so pass a meaningful alt text (it defaults to "image"). It has no keyboard interactions of its own.

Key	Description
None	The avatar is not focusable.