Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

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

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>

)}

Huge

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

<>

  <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 NameParagon VersionInstance Count
frontend-app-discussions20.15.05
prospectus20.32.31
Leave feedback

Contents

All components (A-Z)