eds-avatar
Explore the Interactive Component
Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.
See It in Use with Code
Check out this practical implementation of component.
When you’re using the component directly in HTML (or in frameworks that don’t support property binding), you must pass the values like:
In React
In Vue
Overview
EdsAvatar is a versatile component for displaying user profile representations, including initials or profile pictures.
This component is customizable to adapt to various styles and use cases.
Key features include:
- Display user initials generated from
firstNameandlastNameor use custom initials. - Option to display a profile picture if a URL is provided.
- Customizable background color, including gradient options.
- Configurable shape (rounded or square) and font strength for initials.
The avatar component offers flexibility for different user profile displays, supporting use cases from contact lists to detailed profile views.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
color | color | Background color variant for the avatar, which can apply specific gradient or background colors. | string | undefined |
firstName | first-name | First name of the user for generating initials. | string | 'User' |
initials | initials | Custom initials to display if provided; otherwise, initials will be derived from firstName and lastName. | string | undefined |
lastName | last-name | Last name of the user for generating initials. | string | 'Avatar' |
picture | picture | URL or path to the user’s profile picture. | string | undefined |
Dependencies
Used by
- eds-card-generic
- eds-card-tool
- eds-user
Depends on
Graph
Built with StencilJS
Last updated on