Github Github
  1. Blade Components
  5. Avatar

Avatar

Image element, with a fallback, for graphically representing the user.

Usage

<x-avatar />

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

Default Icons

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

You can customize the default icons globally trough 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');

Image

Show an image by supplying the src="" attribute. Optionally add support for responsive images by supplying the srcset="" attribute.

When showing an image it's good practice to supply the alt="" attribute to specify an alternate text, if the image cannot be displayed.

Kevin Dierkx 
<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 supplying 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

You can control the icon per avatar instance by supplying 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>

On This Page