Avatar

The avatar component allows you to display a rounded picture at different sizes. This component can be useful for displaying pictures of logged-in users, a contact list, directory of employees, etc. The avatar component can either display a single image or a horizontal stack of images. A default placeholder image is used when the image attribute is either blank or not specified.

Single Avatar

        
            <x-bladewind::avatar image="/path/to/the/image/file" />
        
    

Different Sizes

You can specify a size for the avatar. See the full list of attributes for the available sizes. The default size is regular

        
        <x-bladewind::avatar
            image="/path/to/the/image/file"
            size="tiny" />

        <x-bladewind::avatar
            image="/path/to/the/image/file"
            size="small" />

        <x-bladewind::avatar
            image="/path/to/the/image/file"
            size="medium" />

            // this is the default
            <x-bladewind::avatar
            image="/path/to/the/image/file" />

        <x-bladewind::avatar
            image="/path/to/the/image/file"
            size="big" />

        <x-bladewind::avatar
            image="/path/to/the/image/file"
            size="huge" />

        <x-bladewind::avatar
            image="/path/to/the/image/file"
            size="omg" />
        
    

Stacked Avatars

Stacked avatars are a series of avatars overlapping each other. The component will not restrict you from stacking avatars of different sizes but, for a more appealing visual effect, stacking images of the same size is advised. You can achieve 'stackability' by using the x-bladewind::avatars component and setting stacked="true".

        
        <x-bladewind::avatars stacked="true">
            <x-bladewind::avatar image="/path/to/the/image/file" />
            <x-bladewind::avatar image="/path/to/the/image/file" />
            <x-bladewind::avatar image="/path/to/the/image/file" />
            <x-bladewind::avatar image="/path/to/the/image/file" />
            <x-bladewind::avatar image="/path/to/the/image/file" />
        </x-bladewind::avatars>
        
    

Plus More

There are cases where you have several avatars but only want to display a specific number and indicate how many more there are to display. You can achieve this by setting the plus attribute to any positive whole number. Setting the plus attribute automatically sets stacked="true". BladewindUI takes this a step further and allows you to specify an action for your "plus more" avatar by specifying the plus_action attribute. This accepts a Javascript function.

        
        <x-bladewind::avatars
            plus="95"
            plus_action="alert('show more avatars')">
            <x-bladewind::avatar image="/path/to/the/image/file" />
            <x-bladewind::avatar image="/path/to/the/image/file" />
            <x-bladewind::avatar image="/path/to/the/image/file" />
            <x-bladewind::avatar image="/path/to/the/image/file" />
            <x-bladewind::avatar image="/path/to/the/image/file" />
        </x-bladewind::avatars>
        
    

Dot Indicator

Avatars can be displayed with a status indicator. These statuses could be online, offline, invisible. To show a dot indicator on an avatar simply set dotted="true".

<x-bladewind::avatar
    dotted="true"
    image="/path/to/the/image/file" />

By default the dot indicator is displayed at the base of the avatar. To change the position to the top of the avatar, set the dot_position="top" attribute.

<x-bladewind::avatar
    dotted="true"
    dot_position="top"
    image="/path/to/the/image/file" />

The dot is available in different colours if you wish to use an indicator that matches your theme. This also allows you to set different colours for different statuses. Set the dot_color attribute to any of the nine colours compiled into BladewindUI. See the attributes table below for all colours.

<x-bladewind::avatars dotted="true">
    <x-bladewind::avatar dot_color="primary" image="..." />
    <x-bladewind::avatar dot_color="gray" image="..." />
    <x-bladewind::avatar dot_color="red" image="..." />
</x-bladewind::avatars>

Labels

You may have seen this on websites where the initials of your name are displayed if you have not set a profile image. You can achieve this here by specifying a value for the label attribute. A label is also displayed when the image specified is three or less characters long.

    <x-bladewind::avatar dotted="true" label="MO" />

    <x-bladewind::avatar label="MK" />

    <x-bladewind::avatar image="PP" />

<x-bladewind::avatars stacked="true" dotted="true" plus="34">
    <x-bladewind::avatar label="SF" />
    <x-bladewind::avatar label="ZH" />
    <x-bladewind::avatar label="RB" />
</x-bladewind::avatars>

<x-bladewind::avatars dotted="true" class="space-x-4">
    <x-bladewind::avatar label="SF" bg_color="orange" dot_color="orange" />
    <x-bladewind::avatar label="ZH" bg_color="blue" dot_color="blue" />
    <x-bladewind::avatar label="RB" bg_color="purple" dot_color="purple" />
</x-bladewind::avatars>

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Avatar component.

Avatars Component Attributes

 

Avatars with all attributes defined

<x-bladewind::avatars
    size="big"
    show_ring="false"
    dotted="true"
    dot_color="red"
    dot_position="top"
    plus="33"
    plus_action="showMorePictures()"
    stacked="true"
    class="ring-blue-200 ring-offset-2" />

 

Avatar Component Attributes

 

Avatar with all attributes defined

    <x-bladewind::avatar
        image="/path/to/the/image/file"
        alt="company logo"
        size="big"
        stacked="true"
        dotted="true"
        bg_color="cyan"
        show_ring="false",
        dot_color="red",
        dot_position="top"
        class="ring-blue-200 ring-offset-2" />