- Blade Components
- Avatar
Avatar
Image element, with a fallback, for graphically representing the user.
Usage
<x-avatar />
<x-avatar />
Component API
| Attribute | Default | Description |
|---|---|---|
src |
null |
string || nullThe image source. |
srcset |
null |
string || nullThe image source set, used for responsive images. |
alt |
null |
string || nullThe image alternate text. |
size |
null |
string || nullPossible 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>
<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>
<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>
<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 justify-center">
<x-avatar.stack>
<x-avatar />
<x-avatar />
<x-avatar />
</x-avatar.stack>
</div>
<div class="flex justify-center">
<x-avatar.stack>
<x-avatar />
<x-avatar />
<x-avatar />
</x-avatar.stack>
</div>