Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

AvatarButton

A button that contains the user’s Avatar.

Basic Usage

With Dropdown

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

No label

For use in mobile viewports or constrained views.

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

Theme Variables (SCSS)#

$avatar-button-padding-left: 0.25em !default;
$avatar-button-padding-left-sm: 0.25em !default;
$avatar-button-padding-left-lg: 0.25em !default;
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'

Contents

Guides

Foundations

Components

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

All components (A-Z)