Theme

Imagery & Iconography
npm_versionnpm Paragon package page

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

Any Paragon component or export may be added to the code example.

Huge

Any Paragon component or export may be added to the code example.

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;

Props API#

Avatar Props API
  • alt string

    Alt text. Usually the user's name

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

    Size of the avatar

    Default'md'
  • src string

    Image src of the avatar image

Usage Insights#

Avatar

Project NameParagon VersionInstance Count
frontend-app-discussions20.46.35
frontend-component-header-edx21.5.61
frontend-component-header21.5.61
prospectus20.46.21