Avatar

The Avatar component is a key visual element used to identify users, teams, or entities across the interface. It helps create a recognizable and consistent user experience by visually representing people or objects through images, icons, or initials.

Overview

Code

Props

Name	Type	Description	Default
color	`'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'info' \| 'neutral' \|'warning' \| 'error'`	Affects the visual style of the avatar. It can be used following semantic purposes or not.	`'neutral'`
disabled	`boolean`	If true, the componente will be disabled.	`false`
icon	`string \| SVG`	Material Symbol name or SVG element as the icon that will be placed as avatar.	`'person'`
imageSrc	`string`	URL of the image.	-
label	`string`	Text label associated with the avatar. Used to generate and display initials inside the avatar.	-
linkHref	`string`	Page to be opened when the user clicks on the link.	-
onClick	`() => void`	This function will be called when the user clicks the avatar. Makes it behave as a button.	-
primaryText	`string`	Text to be displayed as label next to the avatar.	-
secondaryText	`string`	Text to be displayed as sublabel next to the avatar.	-
shape	`'circle' \| 'square'`	This will determine if the avatar will be a rounded square or a circle.	`'circle'`
size	`'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'`	Size of the component.	`'medium'`
status	`{ mode: 'default' \| 'info' \| 'success' \| 'warning' \| 'error'; position: 'top' \| 'bottom'; }`	Defines the color of the status indicator displayed on the avatar and where it will be placed. If not provided, no indicator will be rendered.	-
tabIndex	`number`	Value of the tabindex attribute. It will only apply when the onClick or linkHref property is passed.	`0`
title	`string`	Text to be displayed inside a tooltip when hovering the avatar.	-

Examples

Basic usage

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcAvatar
        label="Michael Ramirez"
        color="success"
        primaryText="Michael Ramirez"
        secondaryText="m.ramirez@insurance.com"
      />
    </DxcInset>
  );
}

Clickable

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcAvatar
        color="success"
        onClick={() => console.log("Hello")}
      />
    </DxcInset>
  );
}

Status

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcAvatar
        color="error"
        status={{mode: "success", position: "top"}}
      />
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcAvatar
        color="success"
        title="User Name"
      />
    </DxcInset>
  );
}

Overview

Guidelines

Foundations

Migration

Utilities

Components