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 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 firstName and lastName or 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.

Properties

Property	Attribute	Description	Type	Default
`color`	`color`	Background color: ‘grey’ for grey background, ‘black’ for black background with accent text.	`"black" \| "grey"`	`'grey'`
`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-gitlab-contributors
eds-user

Depends on

eds-img

Graph

graph TD;
  eds-avatar --> eds-img
  eds-gitlab-contributors --> eds-avatar
  eds-user --> eds-avatar
  style eds-avatar fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS