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

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

    The button size

  • src string

    Image src of the avatar image

  • variant string

    The button style variant to use