AvatarButton
A button that contains the user’s Avatar.
Basic Usage
Show editable code example
Any Paragon component or export may be added to the code example.
With Dropdown
Show editable code example
Any Paragon component or export may be added to the code example.
Props set on Dropdown.Toggle get passed through to the "as" component
Show editable code example
Any Paragon component or export may be added to the code example.
No label
For use in mobile viewports or constrained views.
Show editable code example
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#
| CSS Variable | Computed Value |
|---|---|
| | |
| | |
| | |
| | |
| | |
Props API#
AvatarButton Props API
- children
stringThe button text
- className
stringA class name to append to the button
- showLabel
boolDefaulttrueShow the label or only the avatar
- size
enum'sm' | 'md' | 'lg'Default'md'The button size
- src
stringImage src of the avatar image
- variant
stringDefault'tertiary'The button style variant to use
Usage Insights#
AvatarButton
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-admin-portal | 21.13.1 | 1 | |
| frontend-app-learner-portal-enterprise | 21.13.1 | 2 | |
| frontend-app-publisher | 21.13.1 | 1 | |
| frontend-app-support-tools | 21.13.1 | 2 | |
| frontend-component-header-edx | 21.13.1 | 2 | |
| prospectus | 20.46.2 | 1 |