Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

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

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

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)