Skip to main content

Avatar

The Avatar component is used to represent a user, and displays the profile picture or the user initials as a fallback.

github
View source code
figma
View design
import { Avatar } from '@uhg-abyss/mobile';
      () => {
        return <Avatar />;
      };

      Images​

      Use the imageUrl prop to set the Avatar image. This can be used to create a co-branded avatar.

      Co-branded Avatars​

      Color Theme​

      Use the colorTheme prop to set the color of the Avatar. The options are 1 (blue), 2 (green), 3 (orange), and 4 (light blue). The default is 1 (blue).

      Size​

      Use the size prop to set the size of the Avatar. The 2 options are small, large. The default is small.

      Notification​

      Use the Indicator component with the Avatar to display a notification. See Indicator for more details and examples.

      Show border​

      Use the showBorder prop to add a border to the Avatar.

      Avatar Props​

      Name
      Type
      		DefaultDescription
      colorTheme
      1 | 4 | 2 | 3 | undefined
      1
      Set the color theme of the Avatar
      imageUrl
      string | undefined
      Sets the Avatar image, if one exists
      initials
      string | undefined
      'UHG'
      Sets the users initials to be displayed inside the component, up to two letters
      onPress
      GestureResponderEventHandler
      Callback fired when the avatar is pressed
      onPressIn
      GestureResponderEventHandler
      Callback fired at the start of the avatar press
      onPressOut
      GestureResponderEventHandler
      Callback fired at the end of the avatar press
      showBorder
      boolean | undefined
      Adds a border to the Avatar
      size
      "large" | "small" | undefined
      'small'
      Sets the size of the Avatar component. Small is 40px, large is 60px

      Avatar Classes​

      Class NameDescription
      abyss-avatar-imageAvatar image element
      abyss-avatar-initialsAvatar text element
      abyss-avatar-rootAvatar root element

      Dynamic Type​

      The avatar text will scale up to 3XL.

      Avatar Tokens​

      Token NameValue
      avatar.color.surface.container.emphasis1.rest
      #F7FCFD
      avatar.color.surface.container.emphasis1.active
      #F1F6F7
      avatar.color.surface.container.emphasis2.rest
      #EFF6EF
      avatar.color.surface.container.emphasis2.active
      #E6F5E6
      avatar.color.surface.container.emphasis3.rest
      #FAF8F2
      avatar.color.surface.container.emphasis3.active
      #F5F3ED
      avatar.color.surface.container.emphasis4.rest
      #EEF8FB
      avatar.color.surface.container.emphasis4.active
      #E4F1F5
      avatar.color.border.container
      #002677
      avatar.color.text.label
      #002677
      avatar.border-radius.all.container
      500
      avatar.border-width.container
      1
      avatar.sizing.all.container
      40
      avatar.spacing.padding.all.container
      4
      Table of Contents