Avatar

Usage

<x-avatar />

Image

Show an image by setting the src attribute. Optionally add support for responsive images by setting the srcset attribute.

When showing an image, set the alt attribute to provide alternate text in case the image cannot be displayed.

<div class="flex justify-center">
    <x-avatar src="/assets/avatar.jpeg"
        srcset="/assets/avatar@2x.jpeg 2x"
        alt="Kevin Dierkx" />
</div>

Size

Control the avatar size by setting the size attribute.

<div class="flex items-start justify-center gap-8 max-md:flex-col">
    <x-avatar size="xs" />
    <x-avatar size="sm" />
    <x-avatar />
    <x-avatar size="lg" />
</div>

Icon

Control the icon per avatar instance by setting the icon attribute. Any blade-ui-kit/blade-icons compatible icon set can be used.

<div class="flex justify-center">
    <x-avatar icon="heroicon-o-academic-cap" />
</div>

Stack

Stack multiple avatars by wrapping them in a <x-avatar.stack> component.

<div class="flex items-start justify-center gap-8 max-md:flex-col">
    <x-avatar.stack>
        <x-avatar size="xs" />
        <x-avatar size="xs" />
        <x-avatar size="xs" />
    </x-avatar.stack>

    <x-avatar.stack>
        <x-avatar size="sm" />
        <x-avatar size="sm" />
        <x-avatar size="sm" />
    </x-avatar.stack>

    <x-avatar.stack>
        <x-avatar />
        <x-avatar />
        <x-avatar />
    </x-avatar.stack>

    <x-avatar.stack>
        <x-avatar size="lg" />
        <x-avatar size="lg" />
        <x-avatar size="lg" />
    </x-avatar.stack>
</div>

Default Icons

The avatar component uses the blade-ui-kit/blade-heroicons icon set by default.

You can customize the default icons globally through the BladeComponents service or via the component directly from a service provider's boot() method, or middleware.

<?php

use DistortedFusion\BladeComponents\BladeComponents;
use DistortedFusion\BladeComponents\Components\Avatar\Index as Avatar;

BladeComponents::defaultAvatarIcon();
BladeComponents::setDefaultAvatarIcon(icon: 'heroicon-o-user');

Avatar::defaultIcon();
Avatar::setDefaultIcon(icon: 'heroicon-o-user');

Component API

x-avatar

Attribute	Default	Description
`src`	`null`	`string` \|\| `null` The image source.
`srcset`	`null`	`string` \|\| `null` The image source set, used for responsive images.
`alt`	`null`	`string` \|\| `null` The image alternate text.
`size`	`default`	`string` Possible values `default`, `xs`, `sm` or `lg`.
`icon`	`heroicon-o-user`	`string` \|\| `null`