Avatar

Synonyms: Persona, Profile Picture, User Avatar

Description: The Avatar component displays either a small image of a user or their initials if no image is available. It is typically used in user profiles, comment sections, or user listings to enable quick visual identification.

Example

Standard view of the component. Code can be shown.

<KolAvatar _color="#5A5FEE" _label="Max Mustermann" />

Accessibility

• Semantic Name: The component is labeled with the _label attribute, which contains the user's name and is read by screen readers.
• Familiar Initials: If no image is available, initials are automatically generated from the _label and displayed as a visual element.
• Initials Hidden: The automatically generated initials are purely visual and are intentionally hidden from assistive technologies, since the semantic information is already available via _label.

Links and References

Usage

Best Practices / Recommendations

• Set label with real name: Always use the _label attribute with the user's real name or a meaningful description. This is essential for accessibility and user comprehension.
• Consistent colors: Use the _color attribute to distinguish different users by color. This improves visual readability and recognition.
• Fallback to initials: If user images are not always available, rely on automatic initials display as a fallback.
• Size compatibility: The component is suitable for various contexts – from compact lists to larger profile views.

Use Cases

• User profiles and account information
• Comment sections and discussion forums
• User lists and team areas
• Chat applications and messaging systems
• Sharing permissions and collaboration features
• Activity feeds with user information

Playground

Test the various properties of the Avatar component:

<KolAvatar _color="#5A5FEE" _label="Max Mustermann" />

Functionalities

Standalone Avatar with Initials

Display of the component without an image – initials are automatically generated from the name:

<KolAvatar _color="#5A5FEE" _label="Anna Schmidt" />

Avatar with Image

Display of an avatar image via the _src attribute:

<KolAvatar _color="#5A5FEE" _label="The image shown is a standard avatar from Font Awesome" _src="https://gravatar.com/avatar/12345?d=mp&s=256" />

Colored Initials

Using the _color attribute to distinguish users by color. The attribute accepts either a simple color value or an object with separate background and foreground colors:

<KolAvatar _color="#FF6B6B" _label="Peter Meyer" />

Avatar with Separate Colors

Precise control over background and foreground color:

<KolAvatar _color={{ "backgroundColor": "#4ECDC4", "foregroundColor": "#FFFFFF" }} _label="Julia Wolf" />

API

Overview

The Avatar component displays either a small image of the user or their initials if no image is available.

Properties

Property	Attribute	Description	Type	Default
_color	_color	Defines the backgroundColor and foregroundColor.	string | undefined | { backgroundColor: string; foregroundColor: string; }	undefined
_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

---