Avatar

The Avatar component shows a user's profile image in a circular frame and allows for a few helpful modifications for different uses.


React Component

Default Avatars

Image Avatars

Court's profile image
Court's profile image
Court's profile image
Court's profile image
Court's profile image
Court's profile image

Avatar Badges

Court's profile image
Court's profile image

Avatar Badges with Custom Color and Icon

Court's profile image
Court's profile image

Custom Colors

Avatar Groups

Demi Wilkinson
Koray Okumus

Avatar centered + custom size

Joshua Wilson

Layering and lazy loading

By default, Avatars with both an image and initials provided will stack with the image on top of the initials. The result is a lazy loading effect where initials appear immediately and an image will appear later on slower or delayed connetions. If this effect is not desired when an image is used, then also set lazy_load_initials: false.

NOTE: This also allows for a fallback approach with image APIs such as Gravatar that return a default image when no user image is available. In such cases a transparent PNG image can be provided as the default image so that when this default image is layered on top of the initials, the initials are seen rather than a generic "anonymous user" image.

Valid Gravatar with lazy loading:

Valid Gravatar with NO lazy loading:

Sage Component

SageAvatar
<h3>Default Avatars</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatar, { size: "24px" } %>
  <%= sage_component SageAvatar, { size: "32px" } %>
  <%= sage_component SageAvatar, { size: "40px" } %>
  <%= sage_component SageAvatar, { size: "56px" } %>
  <%= sage_component SageAvatar, { size: "72px" } %>
  <%= sage_component SageAvatar, { size: "88px" } %>
</div>

<h3>Image Avatars</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatar, {
    size: "24px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "32px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "40px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "56px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "72px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "88px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
</div>

<h3>Avatar Badges</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatar, { size: "24px", badge: true } %>
  <%= sage_component SageAvatar, { size: "32px", badge: true } %>
  <%= sage_component SageAvatar, { size: "40px", badge: true } %>
  <%= sage_component SageAvatar, { size: "56px", badge: true } %>
  <%= sage_component SageAvatar, {
    badge: true,
    size: "72px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    badge: true,
    size: "88px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
</div>

<h3>Avatar Badges with Custom Color and Icon</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatar, {
    badge: true,
    badge_foregroundColor: "yellow",
    badge_backgroundColor: "#4232a8",
    badge_icon: "play-circle",
    size: "80px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    badge: true,
    badge_foregroundColor: "red-300",
    badge_backgroundColor: "#fff",
    badge_icon: "danger",
    size: "80px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
</div>

<h3>Custom Colors</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatar, { size: "24px",  color: "purple" } %>
  <%= sage_component SageAvatar, { size: "32px",  color: "sage" } %>
  <%= sage_component SageAvatar, { size: "40px",  color: "orange" } %>
  <%= sage_component SageAvatar, { size: "56px",  color: "yellow" } %>
  <%= sage_component SageAvatar, { size: "72px",  color: "red" } %>
</div>

<h3>Avatar Groups</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatarGroup, {
    items: [
      { color: nil,
      image: {
        alt: "Demi Wilkinson",
        src: "avatar/demi_wilkinson.png",
        id: "custom_id"
      }},
    ]
  } %>
  <%= sage_component SageAvatarGroup, {
    items: [
      { color: nil },
      { color: "purple", },
    ]
  } %>
  <%= sage_component SageAvatarGroup, {
    items: [
      { color: nil,
        image: {
          alt: "Koray Okumus",
          src: "avatar/koray_okumus.png",
          id: "custom_id"
        }
      },
      { color: "purple", },
      { color: "sage", },
    ]
  } %>
  <%= sage_component SageAvatarGroup, {
    items: [
      { color: nil },
      { color: "purple", },
      { color: "sage", },
      { color: "orange", },
    ]
  } %>
</div>

<h3>Avatar centered + custom size</h3>
<%= sage_component SageAvatar, { 
  centered: true,
  image: {
    alt: "Joshua Wilson",
    src: "avatar/joshua_wilson.png",
    id: "custom_id"
  },
  size: "128px"
} %>

<h3>Layering and lazy loading</h3>
<%= md('
By default, Avatars with both an `image` and `initials` provided will stack with the image on top of the initials.
The result is a lazy loading effect where initials appear immediately and an image will appear later on slower or delayed connetions.
If this effect is not desired when an `image` is used, then also set `lazy_load_initials: false`.

NOTE: This also allows for a fallback approach with image APIs such as Gravatar that return a default image when no user image is available.
In such cases a transparent PNG image can be provided as the default image so that when this default image is layered on top of the initials,
the initials are seen rather than a generic "anonymous user" image.
') %>

<p>Valid Gravatar with lazy loading:</p>
<%= sage_component SageAvatar, {
  image: { src: "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?" }
} %>

<p>Valid Gravatar with NO lazy loading:</p>
<%= sage_component SageAvatar, {
  initials: "PS",
  image: { src: "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?" },
  lazy_load_initials: false
} %>
Property Description Type Default

badge

Adds a badge component to the bottom-right of the avatar. The badge will properly scale to the size of the Avatar.

Boolean

false

badge_backgroundColor

Sets the badge icon background color. Provide either a Sage color name or a custom Hex color value. Use SageTokens::COLOR_PALETTE for hex values from the full Sage color palette. If not set, will default to white.

String

false

badge_foregroundColor

Sets the badge icon stroke/fill color. Use SageTokens::COLOR_SLIDER for Sage system colors. If not set, will default to primary-300.

String

false

badge_icon

Sets a Sage icon. If not set, will defaul to check-circle-filled.

Boolean

false

color

This component uses the --color modifier to change the default color set to the provided color. For example sage-avatar--orange sets the initials color and background color to variants of the system's orange swatch.

["primary", "sage", "yellow", "red", "orange", "purple", "charcoal", "grey", "white", "black"]

nil (primary color)

centered

Formats the avatar to be centered by setting side margin to auto.

Boolean

false

image

Allows for configuration of an image.

{
  alt: String (optional),
  src: String,
}

nil

initials

The initials to display in the avatar circle

String

nil

lazy_load_initials

Whether or not to layer initials behind an image as a lazy loading helper.

Boolean

true

size

A size setting to customize the Avatar's width and height inline. NOTE: Fixed settings such as px, rem, or vw are most reliable as scalable values such as % may lead to a squished appearance.

String

nil

Avatar Group

items

required

A set of items following the Avatar schema above to be displayed. Only the first four items will be rendered.

Array

[]