IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

User Avatar

/

Design

Represent a human person, just like you.

Use it for an individual with their own Hudl account, whether that's a coach, athlete or administrator.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Avatars documentation and examples.

Style

The avatar’s style depends on the content available.

Fallback: A single silhouette appears when no image, color or name is available.

Sizes

Consider layout density and view hierarchy when choosing an avatar’s size.

Custom Sizes

There are some cases when an additional size may be necessary and a custom size can be used. The only custom size currently available (for arguably the biggest use case) is profile.

Profile

Usage

Linked Avatars

Don’t give the avatar a link that doesn’t make sense, like pizzahut.com. The user avatar should go to a user’s profile, not the team’s, and vice versa.

Accessibility

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconWarning WarningIconCritical ViolationsIconConfirmation Pass
  • IconWarningWhen custom colors are used, they do not always result in a sufficient 4.5:1 color contrast ratio.
  • IconCriticalComponent contains an interactive div or span with no associated role.
  • IconCriticalOutermost div is interactive but has no focus styles or tabIndex.
React NativeIconCritical ViolationsIconWarning WarningsIconWarning N/A
  • IconWarningWhen custom colors are used, they do not always result in a sufficient 4.5:1 color contrast ratio.
  • IconCriticalIncreased font size via user settings causes avatars with three characters to clip the last character.
  • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
  • IconWarningAvatars that do not contain text are missing the accessibilityLabel.

Platforms

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.