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.
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.
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.
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 Avatar
s only show one letter in the
displayValue
.
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.
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.