Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

AvatarButton

A button that contains the user’s Avatar.

Basic Usage

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

<>

  <div>

    <AvatarButton size="lg" src="https://picsum.photos/128/128/">Casey</AvatarButton>

  </div>

  <div>

    <AvatarButton size="md" src="https://picsum.photos/128/128/">Casey</AvatarButton>

  </div>

  <div>

    <AvatarButton size="sm" src="https://picsum.photos/128/128/">Casey</AvatarButton>

  </div>

</>

With Dropdown

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

<Dropdown>

  <Dropdown.Toggle as={AvatarButton} src="https://picsum.photos/128/128">

    Casey

  </Dropdown.Toggle>



  <Dropdown.Menu alignRight>

    <Dropdown.Item href="#/action-1">Resume your last course</Dropdown.Item>

    <Dropdown.Item href="#/action-2">Dashboard</Dropdown.Item>

    <Dropdown.Item href="#/action-3">Profile</Dropdown.Item>

    <Dropdown.Item href="#/action-3">Account</Dropdown.Item>

    <Dropdown.Divider />

    <Dropdown.Item href="#/action-3">Sign out</Dropdown.Item>

  </Dropdown.Menu>

</Dropdown>

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

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

<Dropdown>

  <Dropdown.Toggle as={AvatarButton} size="sm" src="https://picsum.photos/128/128/">

    Casey

  </Dropdown.Toggle>



  <Dropdown.Menu alignRight>

    <Dropdown.Item href="#/action-1">Resume your last course</Dropdown.Item>

    <Dropdown.Item href="#/action-2">Dashboard</Dropdown.Item>

    <Dropdown.Item href="#/action-3">Profile</Dropdown.Item>

    <Dropdown.Item href="#/action-3">Account</Dropdown.Item>

    <Dropdown.Divider />

    <Dropdown.Item href="#/action-3">Sign out</Dropdown.Item>

  </Dropdown.Menu>

</Dropdown>

No label

For use in mobile viewports or constrained views.

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

<>

  <div>

    <AvatarButton showLabel={false} size="lg" src="https://picsum.photos/128/128/">Casey</AvatarButton>

  </div>

  <div>

    <AvatarButton showLabel={false} size="md" src="https://picsum.photos/128/128/">Casey</AvatarButton>

  </div>

  <div>

    <AvatarButton showLabel={false} size="sm" src="https://picsum.photos/128/128/">Casey</AvatarButton>

  </div>



  <Dropdown>

    <Dropdown.Toggle  showLabel={false} as={AvatarButton} src="https://picsum.photos/128/128/">

      Casey

    </Dropdown.Toggle>



    <Dropdown.Menu alignRight>

      <Dropdown.Item href="#/action-1">Resume your last course</Dropdown.Item>

      <Dropdown.Item href="#/action-2">Dashboard</Dropdown.Item>

      <Dropdown.Item href="#/action-3">Profile</Dropdown.Item>

      <Dropdown.Item href="#/action-3">Account</Dropdown.Item>

      <Dropdown.Divider />

      <Dropdown.Item href="#/action-3">Sign out</Dropdown.Item>

    </Dropdown.Menu>

  </Dropdown>

</>

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.26.31
frontend-app-learner-dashboard20.32.02
frontend-app-learner-portal-enterprise20.36.02
frontend-app-publisher20.28.51
frontend-app-support-tools20.26.02
frontend-component-header-edx20.32.32
prospectus20.32.31
Leave feedback

Contents

All components (A-Z)