Avatar

What is this?

Avatar indicators visually represent a person with an Admin user account.

Examples

Palette

The Avatar can be rendered in multiple palettes, this means that the color and background-color properties change according to its palette property value. It has lightBlue value by default.

l

g

o

c

p

t

g

Usage

import { Avatar } from '@vtex/admin-ui'

function Example() {
  return <Avatar label="Label" />
}

Props

It also accepts all the props of a div JSX element.

Name	Type	Description	Required	Default
label	string	String that will have its first letter capitalized	✅	-
palette	lightBlue, green, orange, cyan, purple, teal or grey	Avatar theme	🚫	lightBlue

Variants

What should be the color of an Avatar?

Ideally, a color would be generated for each user to identify them consistently throughout the Admin. However, since this color information is still not available for each Admin user, it is recommended to use the default color (lightBlue) to avoid inconsistencies between pages and incorrect associations.

Position

What should be the position and size of an Avatar in a container?

• In a table listing individuals, such as a list of registered users, the Avatar can be positioned as a column just before the name in each row, with a size of 44px.
• In a table with content created by the merchant, such as products and promotions, the Avatar can be one of the last columns, identifying who made changes, with a size of 24px.
• In a comments section, the Avatar should be positioned to the left of the comment text, with a size of 44px.

Behavior

What should happen with an Avatar on click or hover?

• On click, nothing should happen unless the Avatar is within an element that already has a click behavior, such as a table row.
• On hover, when the full name of the Admin user is not already displayed next to the Avatar, a Tooltip should appear with this information.

Content

What should be the initials or the photo of an Avatar?

• Ideally, the initials should be shown only when the user does not have a registered photo. However, this component doesn't support images since Admin users still can't add a photo to their profiles.
• We recommend always using the uppercase initials for the Avatar.
• When the Avatar size is 24px, use the first letter of the user's name.
• When the Avatar size is 44px, use the first letter of the user's name and the first letter of their last surname.
• Consult the Localization team to understand how Avatar indicators should work in other alphabets or character systems.

When to use an Avatar together with the full name?

• Always use the Avatar together with the person's full name. Depending on the available space, this text can also appear on hover in a Tooltip.
• In a comments section, include the full name always visible next to the Avatar.
• In a Table that includes the last modification made, an Avatar for the person who made the change can be in the same column as the modification date or in a separate column, depending on the space available. If they are in the same column, keep the date visible and show a tooltip with the full name on hover.

What to avoid:

• Don't change the capitalization of the user's full name. Prefer to display the name as was registered by the user in their profile.
• Don't truncate one or more surnames. Prefer to include the full name and wrap the text if necessary.

• What is this?