The Avatar component represents a user’s identity in the UI.

It is used in the global navigation’s user menu and may also be used to indicate ownership of user generated content such as a discussion post or open response submission.

Basic Usage


Theme Variables (SCSS)#

$avatar-border-radius: 100% !default;
$avatar-border: solid 1px $light-300 !default;
$avatar-size-xs: 1.5rem !default;
$avatar-size-sm: 2.25rem !default;
$avatar-size: 3rem !default;
$avatar-size-lg: 4rem !default;
$avatar-size-xl: 6rem !default;
$avatar-size-xxl: 11.5rem !default;
$avatar-size-huge: 18.75rem !default;
Avatar Props API
  • alt string

    Alt text. Usually the user's name

  • size enum'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'huge'

    Size of the avatar

  • src string

    Image src of the avatar image