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

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

(blue star) Resources

(blue star) Use cases

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

(blue star) Variants

Property

Avatar Only (Boolean)

  • False (Default)

  • True

Size

  • Default

  • Small

(blue star) Best Practices

The dos and don’ts of this component. What should be kept in mind when using this component?

(blue star) Related Components

Avatar Button

Icon Button (Dimensions of the avatar only variant match

(blue star) Specification

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

(blue star) 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

(blue star) Behaviors

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

(blue star) Accessibility

Focus Management Expectations




Semantics