Avatar

The Avatar component can be used as a visual representation of a user.

Import

import { Avatar } from '@dynatrace/strato-components-preview/content';

Use cases

The Avatar is a visual representation of a user.

CodeSandbox

Add a label and subtitle

You can add a label and a subtitle to the Avatar component by using the Avatar.Label and Avatar.Subtitle components.

CodeSandbox

Creating a display label

The Avatar requires an abbreviation, which usually are the initials of the displayed user. When generating this value you should consider that some users could have more than one firstname or lastname and there could also be team users that have different naming conventions. In the code sample below, an easy way to generate the initials from a name is shown. In the future, the abbreviation could be also created by the Avatar component itself or provided by a user API.

CodeSandbox

Change the size of the Avatar

By default, the size of the Avatar is set to default and shows two letters in the displayValue. If you need a smaller Avatar component you can set the size prop to small. Small Avatars only show one letter in the displayValue.

CodeSandbox

Add a tooltip

You can wrap the Avatar component in a Tooltip component. To make it accessible for keyboard users you need to add a tabIndex. For the alignment of the tooltip it is necessary that the Avatar is not wrapped in an element that is larger than the Avatar itself or that additional styles are set on the Avatar to control the width.

CodeSandbox

Make the Avatar clickable

You can use the small size of the Avatar inside the Button.Prefix slot of the Button component to make it clickable. Additional text can be displayed in the Button.Label slot. If you can't use a wrapping interactive element you can also polymorph the Avatar component itself into an interactive element, such as a link. Keep in mind that nested interactive elements, such as buttons inside buttons, are not valid HTML and can cause issues with accessibility. Ensure that the component is not polymorphed into an interactive element or has a tabIndex set if you use an interactive wrapper element.

CodeSandbox

PropTable

AvatarProps

Signature:

export declare type AvatarProps<E extends .> = <E, >;

Avatar.Label

You can use the Avatar.Label component to render the whole text describing the Avatar, as shown above.

AvatarLabelProps

extends,

Name	Type	Default	Description
children	.	-	Elements to be displayed in the Avatar Label slot.

Avatar.Subtitle

You can use the Avatar.Subtitle component to render extra information below the Avatar's label, as shown above.

AvatarSubtitleProps

extends,

Name	Type	Default	Description
children	.	-	Elements to be displayed in the Avatar Subtitle slot.