Avatar
Synonyms: Persona
The Avatar component displays either a small image of the user or their initials if no image is available.
Construction
Code
<kol-avatar _label="Erika Maria Mustermann"></kol-avatar>
<kol-avatar _label="Erika"></kol-avatar>
<kol-avatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Erika Maria Mustermann"></kol-avatar>
Examples
Usage
With picture
In the default view, the Avatar component displays an avatar image. To do this, the _src attribute must be specified with a URL to the image. Additionally, it is necessary to specify the _label attribute with the user's name so that alternative text can be marked.
Without picture
The Avatar component can also be used without the _src attribute and in this case will show the user's initials based on the _label attribute.
Use cases
Use the Avatar component to display a user's image.
Accessibility
For the Avatar component, the following accessibility points were particularly considered:
- The component is labeled as an aria label with a description text that includes the user's name.
- The initials shown as an alternative to the avatar image are considered a purely visual, semantically irrelevant element and for screen readers hidden accordingly.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_color | _color | Defines the backgroundColor and foregroundColor. | string | undefined | { backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; } | '#d3d3d3' |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
_src | _src | Sets the image src attribute to the given string. | string | undefined | undefined |