Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Avatar

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style avatar is AVATAR_STYLES.

You can not change the name of the object of tokens.

Avatar component style can be configured through the size prop.

Sizes

size can modify the styles for the avatar component for each content type: image, initials or icon.

The tokens used are:

12345678910
const AVATAR_STYLES = {
  [SIZE]: {
    [AvatarContentType.WITH_IMAGE]: {
      linkContainer?: CommonStyleType;
      avatarContainer?: CommonStyleType;
      initials?: TypographyTypes;
      containerBackgroundColor?: BackgroundColorAvatarStylesType;
      containerBorderWidth?: string;
      avatar?: IconTypes;
    },

Types

  • BackgroundColorAvatarStylesType:
12345678910
type BackgroundColorAvatarStylesType = {
  [AvatarBackgroundColor.COLOR_DEFAULT]?: {
    backgroundColor?: string;
    contentColor?: string;
    borderColor?: string;
  };
  [AvatarBackgroundColor.COLOR_RED]?: {
    backgroundColor?: string;
    contentColor?: string;
    borderColor?: string;

Example

avatar theme object example:

12345678910
const AVATAR_STYLES = {
  [SIZE]: {
    [AvatarContentType.WITH_INITIALS]: {
      linkContainer: {
        width: 'width',
        height: 'height',
        border_radius: RADIUS.radius_circle,
      },
      avatarContainer: {
        width: 'width',
AvatarCode API
AvatarAccessibility