AvatarButton

Owned by Adam Butterworth (Deactivated), created

Last updated: Jun 04, 2021

1 min read

DESIGN COMPLETE IMPLEMENTed

A button that contains the user’s Avatar.

Contributors

@Ange Romanska (Deactivated) @Adam Butterworth (Deactivated)

Relate Jira Tickets

https://openedx.atlassian.net/browse/PAR-137 https://openedx.atlassian.net/browse/PAR-132 https://openedx.atlassian.net/browse/PAR-137

1 Resources | 2 Use cases | 3 Variants | 4 Best Practices | 5 Related Components | 6 Specification | 6.1 Anatomy | 6.2 Behaviors | 6.3 Accessibility

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=1105%3A829

Resources

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=1105%3A829

Use cases

The Avatar Button is used for the user account dropdown menu button in the global navigation.

Variants

Property

Property
Avatar Only (Boolean)	False (Default) True
Size	Default Small

Best Practices

Related Components

https://openedx.atlassian.net/wiki/spaces/BPL/pages/2103083206 https://openedx.atlassian.net/wiki/spaces/BPL/pages/2026865458

https://openedx.atlassian.net/wiki/spaces/BPL/pages/2097250669 (Dimensions of the avatar only variant match

Specification

What does an engineer need to know in order to build this component?

Anatomy

Legend

Uses a Default Avatar Component and a arrow_drop_down icon.

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=1105%3A940

Avatar-only variant

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=1155%3A540

Behaviors

Any behaviors of this component should be inherited from the Button component.

Accessibility

Focus Management Expectations
Semantics