Avatar
A graphical representation of a user or entity, typically displaying an image or initials as a fallback.
Anatomy
<script>
import { Avatar } from "@saas-ui/svelte/components/avatar";
</script>
<!-- Avatar with image -->
<Avatar src="https://example.com/avatar.jpg" name="John Doe" />
<!-- Avatar with fallback initials -->
<Avatar name="John Doe" />
<!-- Avatar group -->
<Avatar.Group>
<Avatar src="user1.jpg" name="User 1" />
<Avatar src="user2.jpg" name="User 2" />
<Avatar src="user3.jpg" name="User 3" />
</Avatar.Group>Examples
Basic Accessibility
<Avatar
size="md"
name="David Wilson"
src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
/> Colours Accessibility
colour prop to change the colour scheme. Supports all standard colour palettes.
<VStack gap={4}>
{#each colours as colour}
<HStack gap={4}>
<Text size="xs" class="w-16">{colour}</Text>
<Avatar variant="solid" {colour} name="DW" />
<Avatar variant="subtle" {colour} name="DW" />
<Avatar variant="outline" {colour} name="DW" />
</HStack>
{/each}
</VStack> Fallback Accessibility
<Stack gap={4} class="flex-row items-center">
<Avatar name="Oshigaki Kisame" />
<Avatar name="Sasuke Uchiha" colour="teal" />
<Avatar colour="red" />
</Stack> Group Accessibility
Avatar.Group to display multiple avatars together in a stacked layout.
<Avatar.Group size="lg">
<Avatar
name="David Wilson"
src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
/>
<Avatar
name="Marcus Chen"
src="https://api.dicebear.com/9.x/shapes/svg?seed=marcus"
/>
<Avatar
name="Sarah Johnson"
src="https://api.dicebear.com/9.x/shapes/svg?seed=sarah"
/>
<Avatar fallback="+3" variant="solid" />
</Avatar.Group> Shape Accessibility
shape prop to change the shape of the avatar. Available shapes: square, rounded, full.
<Stack gap={8} class="flex-row items-start">
{#each avatarShapes as shape}
<VStack gap={2} class="items-center">
<Text size="xs">{shape}</Text>
<Avatar
{shape}
size="lg"
name="David Wilson"
src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
/>
</VStack>
{/each}
</Stack> Sizes Accessibility
size prop to change the size of the avatar. Available sizes: 2xs, xs, sm, md, lg, xl, 2xl.
<Stack gap={6} class="flex-row items-start">
{#each avatarSizes as size}
<VStack gap={2} class="items-center">
<Text size="xs">{size}</Text>
<Avatar
{size}
name="David Wilson"
src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
/>
</VStack>
{/each}
</Stack> Stacking Accessibility
stacking prop with first-on-top or last-on-top to control avatar stacking order.
<Stack gap={8}>
<Avatar.Group size="lg" stacking="last-on-top">
<Avatar
name="David Wilson"
src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
/>
<Avatar
name="Marcus Chen"
src="https://api.dicebear.com/9.x/shapes/svg?seed=marcus"
/>
<Avatar
name="Sarah Johnson"
src="https://api.dicebear.com/9.x/shapes/svg?seed=sarah"
/>
<Avatar fallback="+3" />
</Avatar.Group>
<Avatar.Group size="lg" stacking="first-on-top">
<Avatar
name="David Wilson"
src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
/>
<Avatar
name="Marcus Chen"
src="https://api.dicebear.com/9.x/shapes/svg?seed=marcus"
/>
<Avatar
name="Sarah Johnson"
src="https://api.dicebear.com/9.x/shapes/svg?seed=sarah"
/>
<Avatar fallback="+3" />
</Avatar.Group>
<Avatar.Group size="lg" spaceX="1" borderless>
<Avatar
name="David Wilson"
src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
/>
<Avatar
name="Marcus Chen"
src="https://api.dicebear.com/9.x/shapes/svg?seed=marcus"
/>
<Avatar
name="Sarah Johnson"
src="https://api.dicebear.com/9.x/shapes/svg?seed=sarah"
/>
<Avatar fallback="+3" />
</Avatar.Group>
</Stack> Variants Accessibility
variant prop to change the visual style. Available variants: solid, subtle, outline.
<HStack align="start" gap={4} class="flex-wrap p-4">
{#each avatarVariants as variant}
<VStack gap={2} class="items-center">
<Text size="xs">{variant}</Text>
<Avatar {variant} name="David Wilson" size="lg" />
</VStack>
{/each}
</HStack> With Ring Accessibility
ring prop to show a ring around the avatar, useful for indicating status or selection.
<Stack gap={4} class="flex-row items-center">
<Avatar
name="David Wilson"
colour="pink"
src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
ring
/>
<Avatar
name="Marcus Chen"
colour="green"
src="https://api.dicebear.com/9.x/shapes/svg?seed=marcus"
ring
/>
<Avatar
name="Sarah Johnson"
colour="blue"
src="https://api.dicebear.com/9.x/shapes/svg?seed=sarah"
ring
/>
</Stack>Props
Avatar
The main avatar component.
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | The image source of the avatar. |
name | string | - | The name of the person in the avatar. Used for the alt text and fallback initials. |
size | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "md" | The size of the avatar. |
variant | "solid" | "subtle" | "outline" | "solid" | The visual style of the avatar. |
shape | "square" | "rounded" | "full" | "full" | The shape of the avatar. |
colour | ColourName | "gray" | The colour palette of the avatar. |
ring | boolean | false | Whether to show a ring around the avatar using the colour palette. |
fallback | string | Snippet | - | Custom fallback content. Can be a string (like "+3") or a Snippet. |
class | string | - | Additional CSS classes to apply. |
style | string | - | Inline styles to apply via the style attribute. |
children | Snippet | - | Any children to render (rarely used directly, usually fallback). |
Avatar.Group
A container for grouping multiple avatars together in a stacked layout.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "md" | The size of the avatars in the group. |
stacking | "first-on-top" | "last-on-top" | "last-on-top" | The stacking order of the avatars. |
spaceX | "1" | "2" | "3" | "4" | - | The spacing between avatars. |
borderless | boolean | false | Whether the avatars should have a border. |
class | string | - | Additional CSS classes. |
style | string | - | Inline styles. |
children | Snippet | - | The avatars to render in the group. |