Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Avatar

An image element with a fallback for representing a user.

Usage
AR Alex Rivera
example.blade.php 
<x-slate::avatar
    src="https://i.pravatar.cc/128?u=slate"
    alt="Alex Rivera"
    fallback="AR"
/>

Composition
code 
Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge (optional status dot or icon)

Prefer the prop API for typical avatars. Compose manually when you need custom markup:

AR Alex Rivera
example.blade.php 
<x-slate::avatar>
    <x-slate::avatar-fallback>AR</x-slate::avatar-fallback>
    <x-slate::avatar-image src="https://i.pravatar.cc/128?u=slate" alt="Alex Rivera" />
</x-slate::avatar>

Status dot

Use dot for an online-style indicator, or compose avatar-badge yourself.

AR JD CN
example.blade.php 
<div class="flex items-center gap-4">
    <x-slate::avatar fallback="AR" size="lg" dot />
    <x-slate::avatar fallback="JD" size="lg" dot="warning" />
    <x-slate::avatar size="lg" fallback="CN" dot="success" />
</div>

Badge with icon
PP
example.blade.php 
<x-slate::avatar size="lg" fallback="PP">
    <x-slate::avatar-badge>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true">
            <path d="M12 5v14" stroke-linecap="round" />
            <path d="M5 12h14" stroke-linecap="round" />
        </svg>
    </x-slate::avatar-badge>
</x-slate::avatar>

Sizes
SM DF LG
example.blade.php 
<div class="flex items-center gap-4">
    <x-slate::avatar size="sm" fallback="SM" />
    <x-slate::avatar fallback="DF" />
    <x-slate::avatar size="lg" fallback="LG" />
</div>

Group
A B C
+3
example.blade.php 
<x-slate::avatar-group>
    <x-slate::avatar fallback="A" />
    <x-slate::avatar fallback="B" />
    <x-slate::avatar fallback="C" />
    <x-slate::avatar-group-count>+3</x-slate::avatar-group-count>
</x-slate::avatar-group>

API Reference

Avatar
Prop Type Default Description
size default | sm | lg default Avatar diameter
src string — Image URL (composes avatar-image)
alt string "" Image alt text
fallback string — Fallback initials when image is missing/broken
dot bool | success | warning | destructive | info | primary | muted — Status indicator at the end-bottom corner (true = success)
as string span Root HTML element

Parts

avatar-image, avatar-fallback, avatar-badge, avatar-group, and avatar-group-count accept as and HTML attributes.

Last updated .