Data Display

Avatar

Profile graphic that renders a user image with automatic initials fallback when the source is missing or fails to load.

import { Avatar } from '@lostgradient/cinder/avatar';
identityimage
01

Overview

Displays a user's profile photo, initials, or fallback icon at a consistent size.

Usage

svelte 
<script lang="ts">
  import Avatar from '@lostgradient/cinder/avatar';
</script>

<Avatar />
Live preview
02

When to use

Use when
  • Representing a person or account next to their name or activity.
  • Displaying initials when no avatar image is available.
Avoid when
  • Showing a small status or count indicator — use badge or status-dot instead.
03

Examples

Basic avatar

Image variant alongside an initials fallback.

Avatar shapes

Circle and square shape variants.

Avatar sizes

xs, sm, md, lg, and xl size tokens.

04

Props

Props for avatar
Name Type Default Required Bindable Description
src text Image source. When omitted, the initials fallback renders.
alt text Alternative text for the image. Defaults to name when present.
name text Display name used to compute initials when no image is available. Also used as the default alt for the image.
size 'xs''sm''md''lg''xl' 'md' Size token. Default md.
shape 'circle' | 'square' 'circle' Shape. Default circle.