Avatar
<ahi-avatar> | AhiAvatar
Avatars are used to show a thumbnail representation of an individual in the interface.
By default, a generic icon will be shown. You can customize avatars by adding initials and images. You
should always provide a label for assistive devices.
<ahi-avatar label="User avatar"></ahi-avatar>
Examples
Image
To use an image for the avatar, set the image and label attributes. This will take
priority and be shown over initials and icons. To lazy load an image you can use the
loading attribute and set it to lazy.
<ahi-avatar
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
label="Avatar of a gray tabby kitten looking down"
>
</ahi-avatar>
<ahi-avatar
image="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
label="Avatar of a white and grey kitten on grey textile"
loading="lazy"
>
</ahi-avatar>
Initials
When you don’t have an image to use, you can set the initials attribute to show something more
personalized than an icon.
<ahi-avatar initials="AH" label="Avatar with initials: AH"></ahi-avatar>
Sizes
Use the size attribute to change an avatar’s size.
<ahi-avatar size="small" label="User avatar"></ahi-avatar>
<ahi-avatar size="medium" label="User avatar"></ahi-avatar>
<ahi-avatar size="large" label="User avatar"></ahi-avatar>
Custom sizes
For any other size, set the --size custom property. It sets both the width and the height, the
initials scale with it, and it takes precedence over size.
<ahi-avatar initials="JD" label="Jane Doe" style="--size: 80px"></ahi-avatar>
Avatar groups
You can group avatars with a few lines of CSS.
<div class="avatar-group">
<ahi-avatar
image="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
label="Avatar 1 of 4"
></ahi-avatar>
<ahi-avatar
image="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
label="Avatar 2 of 4"
></ahi-avatar>
<ahi-avatar
image="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
label="Avatar 3 of 4"
></ahi-avatar>
<ahi-avatar
image="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
label="Avatar 4 of 4"
></ahi-avatar>
</div>
<style>
.avatar-group ahi-avatar:not(:first-of-type) {
margin-left: calc(var(--ahi-space-4) * -1);
}
.avatar-group ahi-avatar::part(base) {
border: solid var(--ahi-border-width-2) var(--ahi-surface);
}
</style>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/avatar/avatar.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/avatar/avatar.js';Slots
| Name | Description |
|---|---|
icon
|
The default icon to use when no image or initials are present. Works best with
<ahi-icon>.
|
initials
|
The Avatar’s initials. Alternatively, you can use the initials attribute. |
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
image
|
The image source to use for the avatar. |
string
|
''
|
|
label
|
A label to use to describe the avatar to assistive devices. |
string
|
''
|
|
initials
|
Initials to use as a fallback when no image is available (2 characters max recommended). |
string
|
''
|
|
loading
|
Indicates how the browser should load the image. |
'eager' | 'lazy'
|
'eager'
|
|
size
|
The avatar’s size: 32, 40 or 60 pixels. For any other size, set the --size custom
property instead.
|
'small' | 'medium' | 'large'
|
'medium'
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Events
| Name | Description | Event Detail |
|---|---|---|
ahi-error |
The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. | - |
Learn more about events.
Custom Properties
| Name | Description | Default |
|---|---|---|
--size |
The avatar’s width and height, for a size between or beyond the size steps. The
initials scale with it. Takes precedence over size.
|
Learn more about customizing CSS custom properties.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the avatar part instead. |
avatar |
The component’s outer wrapper. |
icon |
The container that wraps the avatar’s icon. |
initials |
The container that wraps the avatar’s initials. |
image |
The avatar image. Only shown when the image attribute is set. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<ahi-icon>