AvatarCompact

Usage

Avatar Compact is a graphical representation of an object or entity, for example a person or an organization. There are two different components in Bauhaus Design System that should not be confused as they have similar names: one is Avatar Compact and the other one is Avatar Upload.

The current component, Avatar Compact, is used to inform users that they are currently logged into their account, and this component can also be a link to navigate users to their account information page (optionally). This second property of Avatar Compact is optional and can be disabled depending on the application and the use case, so the component will only serve the purpose of informing users that they are logged in to their account.

Avatar Upload, on the other hand, is used to enable the user to upload a custom image from their local system to display as their avatar image.

Types

Avatar Compact has two different types/representations: No Image and Image Uploaded. No Image Avatar is displayed by default when no image is uploaded by the user as an avatar. When an image, such as the user’s profile picture or a company logo is present in the users account information, the Avatar Compact changes type and always displays it for that user until further change.

Avatar Compact also has two different modes:

• On Light Background - for use on light backgrounds
• On Lila Background - for use on the Lila 30 background

Anatomy and Behavior

The name of the user is shown on hover state of the avatar in a Tooltip. The letter in the No Image state of the component is derived from the first letter of the user’s name.

States

Avatar Compact can have the states of hover, active, focus, and disabled.

Gaps and Sizes

• Container Width & Height: XLplus
• Circle Diameter: Lplus
• Text Height: M
• Text Width: Hugs character
• Letter Alignment: Center

Tokens

SCSS Variable

Value

$avatarCompact-container-outline-color--focus

--color-azure-45

$avatarCompact-onLightBg-noImage-bgColor

transparent

$avatarCompact-onLightBg-noImage-text-color

--color-grey-54

$avatarCompact-onLightBg-noImage-outline-color

--color-grey-54

$avatarCompact-onLightBg-noImage-color--locked

--color-grey-70

$avatarCompact-onLightBg-imageUploaded-overlay-color--locked

--color-gradient-glass-1-color

$avatarCompact-onLilaBg-noImage-text-color

--color-lila-80

$avatarCompact-onLilaBg-noImage-outline-color

--color-lila-80

$avatarCompact-onLilaBg-noImage-color--locked

--bds-brand-primary-color-locked-lowContrast

$avatarCompact-onLilaBg-imageUploaded-overlay-color--locked

--color-gradient-glass-4-dark-color

$avatarCompact-boxShadow--hover

--embossed-1--grey-95

$avatarCompact-boxShadow--active

--debossed-1--grey-95

$avatarCompact-onLilaBg-boxShadow--hover

--bds-flatElement-brand--hovered

$avatarCompact-onLilaBg-boxShadow--active

--bds-flatElement-brand--active

Properties

export interface AvatarCompactProps extends ElementProps, TooltipProps {
  userName: string;
  img?: string;
  background?: AvatarMode;
  disabled?: boolean;
};

export type TooltipPosition = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';

export interface TooltipProps {
  tooltip?: string;
  tooltipPosition?: TooltipPosition;
  tooltipLines?: number;
}