Start building

Platform

Open Source

Resources

Sign in

Avatar

x-avatar

A user avatar showing a photo, auto-generated initials from a name, or a fallback icon. Five sizes, square or circle, an optional status dot, and deterministic colors.

php artisan components:add avatar

Examples

Sizes, photos & status

Photo, initials, or icon fallback — five sizes, circle or square, with an optional status dot.

<div class="flex flex-wrap items-center justify-center gap-4">
    <x-components.avatar size="xs" name="Tony Lea" circle />
    <x-components.avatar size="sm" name="Ada Lovelace" color="auto" circle />
    <x-components.avatar size="md" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&h=120&fit=crop&crop=faces" circle status="online" />
    <x-components.avatar size="lg" name="Grace Hopper" color="auto" />
    <x-components.avatar size="xl" circle status="busy" />
</div>

Colors

Deterministic soft colors, or auto to derive one from the name.

<div class="flex flex-wrap items-center justify-center gap-3">
    <x-components.avatar name="Blue" color="blue" circle />
    <x-components.avatar name="Green" color="green" circle />
    <x-components.avatar name="Amber" color="amber" circle />
    <x-components.avatar name="Rose" color="rose" circle />
    <x-components.avatar name="Violet" color="violet" circle />
</div>

Props

Prop Type Default Description
src text — Image URL. Falls back to initials, then an icon.
name text — Full name used to derive initials and the auto color.
initials text — Explicit initials, overriding those derived from name.
size select xs · sm · md · lg · xl md The avatar size.
circle boolean false Render a full circle instead of a rounded square.
color text — A soft color (blue, green, amber, rose, violet, cyan, orange, teal, pink, indigo) or 'auto' to derive one from the name.
status select online · away · busy · offline — Optional presence dot in the corner.

Slots

Slot Description
slot Custom fallback content, shown when there's no src, initials or name.