Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.Visit playground
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.

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;
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

Contents

All components (A-Z)