Paragon Design System

Technical Documentation

Theme

npm_versionnpm Paragon package page

AvatarButton

Edit this pagein a new tabLeave feedbackin a new tab

A button that contains the user’s Avatar.

Basic Usage

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

With Dropdown

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

Props set on Dropdown.Toggle get passed through to the "as" component

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

No label

For use in mobile viewports or constrained views.

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

CSS overrides can be applied to this component through the .btn-avatar class name.

Theme Variables (SCSS)#

$avatar-button-padding-left:  .25em !default;
$avatar-button-padding-left-sm:  .25em !default;
$avatar-button-padding-left-lg:  .25em !default;

Props API#

AvatarButton Props API
  • children string

    The button text

  • className string

    A class name to append to the button

  • showLabel bool

    Show the label or only the avatar

    Defaulttrue
  • size enum'sm' | 'md' | 'lg'

    The button size

    Default'md'
  • src string

    Image src of the avatar image

  • variant string

    The button style variant to use

    Default'tertiary'

Usage Insights#

AvatarButton

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.46.31
frontend-app-learner-dashboard20.46.21
frontend-app-learner-portal-enterprise20.45.42
frontend-app-publisher20.46.21
frontend-app-support-tools20.46.02
frontend-component-header-edx21.5.62
prospectus20.46.21
Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)