Avatar

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

Show editable code example

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

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Stack
      className="bg-light p-2"
      gap={2}
      direction={ isExtraSmall ? "vertical" : "horizontal" }
    >
      <Avatar size="xxl" />
      <Avatar size="xl" />
      <Avatar size="lg" />
      <Avatar />
      <Avatar size="sm" />
      <Avatar size="xs" />
    </Stack>
)}

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

  return (
    <Stack
      className="bg-light p-2"
      gap={2}
      direction={ isExtraSmall ? "vertical" : "horizontal" }
    >
      <Avatar size="xxl" />
      <Avatar size="xl" />
      <Avatar size="lg" />
      <Avatar />
      <Avatar size="sm" />
      <Avatar size="xs" />
    </Stack>
)}

Huge

Show editable code example

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

<>
  <Avatar size="huge" />
</>

<>
  <Avatar size="huge" />
</>

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 Name	Paragon Version	Instance Count
frontend-app-discussions	20.44.0	5
frontend-component-header-edx	21.5.6	1
frontend-component-header	21.5.6	1
prospectus	20.46.2	1

Edit this page Leave feedback

Paragon Design System

Theme

Avatar

Basic Usage

Huge

Theme Variables (SCSS)#

Props API#

Usage Insights#

Avatar

All components (A-Z)

Theme

Avatar

Basic Usage#

Huge#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Avatar

All components (A-Z)

Basic Usage

Huge