Avatar

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

Usage

<x-avatar />

Component API

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`	`null`	`string` \|\| `null` Possible values `null`, `xs`, `sm` or `lg`.
`icon`	`heroicon-o-user`	`string` \|\| `null`

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.

<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-center justify-between">
    <x-avatar size="lg" />
    <x-avatar />
    <x-avatar size="sm" />
    <x-avatar size="xs" />
</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>

Previous

Next